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