html 支持有序、無序和定義列表
html 無序列表無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標(biāo)記 無序列表使用 <ul> 標(biāo)簽 <ul> <li>Coffee</li> <li>Milk</li> </ul> HTML 有序列表同樣，有序列表也是一列項目，列表項目使用數(shù)字進行標(biāo)記 有序列表始于 <ol> 標(biāo)簽 每個列表項始于 <li> 標(biāo)簽 列表項項使用數(shù)字來標(biāo)記 <ol> <li>Coffee</li> <li>Milk</li> </ol> HTML 自定義列表自定義列表不僅僅是一列項目，而是項目及其注釋的組合 自定義列表以 <dl> 標(biāo)簽開始 每個自定義列表項以 <dt> 開始 每個自定義列表項的定義以 <dd> 開始 <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> 列表的css列表最重要的css屬性便是list-style屬性，它的語法如下： list-style:list-style-image||list-style-position||list-style-type list-style-image可定義列表前所使用圖片，list-style-position屬性取值含outside、inside；outside為默認值，列表項目標(biāo)記此時被放置在文本以外，它將環(huán)繞文本在文本之外，inside列表項目旋轉(zhuǎn)在文本以內(nèi)，環(huán)繞文本對齊。 列表最重要的CSS屬性便是list-style屬性，它的語法如下： list-style:list-style-image||list-style-position||list-style-type list-style-image可定義列表前所使用圖片，list-style-position屬性取值含outside、inside；outside為默認值，列表項目標(biāo)記此時被放置在文本以外，它將環(huán)繞文本在文本之外，inside列表項目旋轉(zhuǎn)在文本以內(nèi)，環(huán)繞文本對齊。 <style type="text/css">
ul{border:dotted 1px #666;}
li{background:#ddd;}
ul.out{list-style-position:outside;}
ul.in{list-style-position:inside;}
</style>list-style-position為outside <ul class="out"> <li>關(guān)于主題</li> <li>關(guān)于形式</li> <li>關(guān)于內(nèi)容</li></ul> <h4>list-style-position為inside</h4> <ul class="in"> <li>關(guān)于主題</li> <li>關(guān)于形式</li> <li>關(guān)于內(nèi)容</li> </ul> 若列表外標(biāo)簽<ul>或<dl>或<ol>的padding-left設(shè)置為0，且list-style-position為outside時，列表符號將不會顯示，如上例中ul添加padding-left:0;將顯示如下： list-style-type為列表顯示類型 ，它共有9種常見屬性值：
我們可以看到，三種不同列表實際上只是list-style-type默認值不一樣而已，通過設(shè)置list-style-type即可實現(xiàn)不同顯示效果。 列表之間的嵌套列表嵌套的html書寫是不少人容易犯的錯誤，經(jīng)常寫錯格式是這樣的： <ul> <li>男性</li> <li> <ol>女性 <li>女孩子</li> <li>姑娘</li> <li>大媽</li></ol> </li> </ul> 這里包括兩處錯誤：一是<ul>后不允許直接跟文字，二是這里的文字“女性”應(yīng)當(dāng)在第二個<li>后。正確格式如下： <ul> <li>男性</li> <li>女性 <ol> <li>女孩子</li> <li>姑娘</li> <li>大媽</li></ol> </li> </ul> 使用適合的標(biāo)簽進行合理的嵌套可以實現(xiàn)很多復(fù)雜的布局，比如常見的tab標(biāo)簽、滑動門等完全不需要使用js操作DOM即可完成，而且實現(xiàn)簡單，語義性強。 下例以文章列表為例，html如下： <h4>站點文章列表摘要</h4> <dl> <dt> <a>文章一：JavaScript程序的優(yōu)化</a> </dt> <dd>文章發(fā)布時間:2021-4-17</dd> <dt> <a>文章二：深入解析JavaScript中eval</a> </dt> <dd>文章發(fā)布時間：2021-4-17</dd> <dt> <a>文章三：實現(xiàn)sqlite高并發(fā)的問題</a> </dt> <dd>文章發(fā)布時間:2021-4-17</dd></dl> CSS樣式如下： <style type="text/css">
h4 {
font-size:14px;
color:#333;
}
a {
color:#069;
}
dl {
border:dashed 1px #666;
font-size:14px;
padding:4px;
background:#FDFBDB;
}
dt {
clear:left;
float:left;
padding:4px 0;
}
dd {
text-align:right;
padding:4px 0;
font-size:12px;
color:#666;
}
</style>有用提示列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等。 |
