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