整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天來說下HTML語言CSS樣式字體的文本縮進 text-indent
text-indent屬性用來指定文本的第一行的縮進，通常是將段落的首行縮進。來看下語法使用:
div {
text-indent:10px;
}
來看下使用效果,使用前:
每一行沒有縮進
使用后:
每個段落的第一行都縮進了20px，具體代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS樣式之文本縮進</title>
<style>
p {
text-indent: 20px;
}
</style>
</head>
<body>
<p>第一年，我考上了大學，來到了北京,冬天的雪就像冷冷的冰雨，
在臉上胡亂的拍.搖啊搖，搖啊搖，搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間。
</p>
<p>一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。</p>
<p>只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5。只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5</p>
</body>
</html>
需要縮進的像素可以是任意值，除了正的px,還可以是負的值，可以看下效果:
這不是我的瀏覽器壞了，展示不了段落首部，是將px修改為-20px
具體代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS樣式之文本縮進</title>
<style>
p {
text-indent: -20px;
}
</style>
</head>
<body>
<p>第一年，我考上了大學，來到了北京,冬天的雪就像冷冷的冰雨，
在臉上胡亂的拍.搖啊搖，搖啊搖，搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間。
</p>
<p>一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。</p>
<p>只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5。只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5</p>
</body>
</html>
根據大家寫文章段落的習慣，一般都是縮進兩個字，但是20px或者10px是不是2個字的長度呢，回答不是的。縮進字數長度有專門的單位: em
通過設置該屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。
em是一個相對單位，就是當前元素 font-size 1個文字的大小，如果當前元素沒有設置大小，則會按照1個父元素文字大小。
我們來看下效果:
確實是縮進了2個字的長度，看下對應代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS樣式之文本縮進</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>第一年，我考上了大學，來到了北京,冬天的雪就像冷冷的冰雨，
在臉上胡亂的拍.搖啊搖，搖啊搖，搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間。
</p>
<p>一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。</p>
<p>只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5。只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5</p>
</body>
</html>
每個段落第一行如果想要三個字間距，就是3em
今天就先到這里，大家周末快樂~
elocity中常常會寫出#foreach #if #else #end等語句，
但由于模板文件中html本身就帶有縮進，所以最終的縮進，并不符合velocity語句的含義。當主要針對velocity邏輯閱讀時，很不方便
沒有處理格式代碼：
模板代碼：
模板代碼截圖
生成html文件截圖：
#if產生縮進后的截圖
解決辦法：
“#if#foreach#else#end”這些語法，不用任何縮進。并且行尾加##注釋，表示不解析后面空格
定格寫，末尾加##注釋
取消縮進后結果
velocity-wiki地址
https://cwiki.apache.org/confluence/display/velocity/VelocityWhitespaceTruncatedByLineComment
解決辦法截圖
TML 框架
框架的作用就是把瀏覽器窗口劃分成多個子窗口。
每個子窗口可以載入各自的HTML文檔。
框架(frameset)與頁面主體body是同級的關系
1.框架的整體結構
<frameset rows="高度"> ~ </frameset>
<frameset cols="寬度"> ~ </frameset>
<frame src="http://www.haook.cn" name="框架名稱">
<noframes> ~ </noframes>
屬性屬性值說明
rowspx , %上下分割窗口
colspx , % 左右分割窗口
srcurl指定要載入到框架的頁面地址
name指定框架名稱
例 1：上中下分割框架
<frameset rows="高度A,高度B,高度C">
<frame src="1.html" />
<frame src="2.html" />
<frame src="3.html" />
</frameset>
例 2：左右分割框架
<frameset cols="寬度A, 寬度B, 寬度C">
<frame src="1.html" />
<frame src="2.html" />
<frame src="3.html" />
</frameset>
例 3：
<frameset rows="高度A,高度B">
<frame src="top.html" />
<frameset cols="寬度A,寬度B">
<frame src="menu.html" />
<frame src="main.html" />
</frameset>
</frameset>
2.設置框架的顯示方式
<frame scrolling="yes" noresize />
<frame marginwidth="左右縮進" marginheight="上下縮進" />
屬性屬性值說明
scrolling yes、no、auto是否顯示滾動條
noresize 禁止改變框架的尺寸大小
marginwidthpx框架內左右的空白區域
marginheightpx框架內上下的空白區域
frameborder1, 0是否顯示邊框
framespacing0框架與框架之間的空白
border0 邊框
3. <iframe> 內嵌框架
<iframe src="URL" name="框架名"> ~ </iframe>
屬性屬性值說明
widthpx , %指定框架的寬度
heightpx , % 指定框架的高度
scrollingyes,no,auto是否顯示滾動條
frameborder1, 0是否顯示邊框
head 頭信息
1.設置頁面標題
<title> ~ </title>
2. 設置頁面編碼
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
utf-8 多國語言編碼
gb2312 中文簡體編碼
3. 設置頁面關鍵字，內容介紹
<meta name="keywords" content="關鍵字1，關鍵字2，…" />
<meta name="description" content="內容介紹" />
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
