如何在網(wǎng)頁設(shè)計(jì)中定義列表樣式
設(shè)置項(xiàng)目符號(hào)
在網(wǎng)站建設(shè)中，使用list-style-type屬性來定義列表的項(xiàng)目符號(hào)。具體用法如下：
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none |armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha |lower-latin | upper-latin
該屬性的參數(shù)值說明如表所示。
【示例1】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁，保存為test.html，在<body>標(biāo)簽內(nèi)輸入如下代碼：
<h2>北京最吸引人的地方</h2><ul>
<li>什剎海</li>
<li>故宮</li>
<li>音樂會(huì)古鋼琴咖啡廳</li>
<li>北海公園泛舟</li>
<li>秋天的香山公園賞紅葉</li></ul>
在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，用來定義網(wǎng)頁屬性和列表樣式。
body { /*頁面基本屬性*/
background-color: #CCCCCC; /*設(shè)置頁面背景顏色*/}ul { /*列表樣式*/ color: #CC0000;
list-style-type: square; /*項(xiàng)目符號(hào)*/}
網(wǎng)頁背景顏色為#CCCCCC，list-style-type:square語句設(shè)置了項(xiàng)目符號(hào)為正方形。
在CSS中，無論是<ol>還是<ul>都可以使用相同的屬性值，而且效果是完全相同的。例如，本示例中修改<ul>標(biāo)簽的樣式為項(xiàng)目編號(hào)。
ul{ /*列表樣式*/ color:#CC0000;
list-style-type:decimal; /*項(xiàng)目編號(hào)*/
可以看到，項(xiàng)目列表按阿拉伯?dāng)?shù)字顯示編號(hào)，這本身是有序列表<ol>的屬性參數(shù)，但是由于在CSS中<ul>和<ol>的分界并不十分嚴(yán)格，只要利用list-style-type屬性，二者就可以通用。
【示例2】在網(wǎng)站建設(shè)中，當(dāng)給<ul>或<ol>標(biāo)簽設(shè)置list-style-type屬性時(shí)，在它們中間的所有<li>標(biāo)簽也都默認(rèn)設(shè)置為該屬性，而如果單獨(dú)為某個(gè)<li>標(biāo)簽設(shè)置list-style-type屬性時(shí)，則僅僅作用在該條項(xiàng)目上。啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁，保存為test2.html，在<body>標(biāo)簽內(nèi)輸入如下代碼：
<h2>北京最吸引人的地方</h2><ul>
<li>什剎海</li>
<li>故宮</li>
<li class="special">音樂會(huì)古鋼琴咖啡廳</li>
<li>北海公園泛舟</li>
<li>秋天的香山公園賞紅葉</li>
</ul>
在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，用來定義網(wǎng)頁屬性和列表樣式。
body{ /*頁面基本屬性*/
background-color:#CCCCCC; /*設(shè)置頁面背景顏色*/ }ul{ /*列表樣式*/
color:#CC0000; list-style-type:disc; /*項(xiàng)目符號(hào)為實(shí)心圓*/}
.special{
list-style-type:square; /*單獨(dú)設(shè)置項(xiàng)目符號(hào)為正方形*/}
可以看到，單獨(dú)設(shè)置的<li>標(biāo)簽和其他標(biāo)簽的符號(hào)是不同的。
提示：在網(wǎng)頁設(shè)計(jì)中，list-style-type屬性在<ul>標(biāo)簽中默認(rèn)的參數(shù)是實(shí)心圓，如果在沒有設(shè)置list-style-type屬性時(shí)，列表的項(xiàng)目符號(hào)將顯示為實(shí)心圓，在<ol>標(biāo)簽中默認(rèn)的項(xiàng)目編號(hào)是阿拉伯?dāng)?shù)字，如果希望列表不顯示任何符號(hào)或編號(hào)，需要添加聲明語句：list-style-type:none。