如何在網(wǎng)頁設計中定義列表樣式

設置項目符號

網(wǎng)站建設中,使用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ù)值說明如表所示。

d59212edea11698a7e8ab312a3804c3f.jpg

【示例1】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,在<body>標簽內(nèi)輸入如下代碼:

<h2>北京最吸引人的地方</h2><ul>    

<li>什剎海</li>    

<li>故宮</li>    

<li>音樂會古鋼琴咖啡廳</li>    

<li>北海公園泛舟</li>    

<li>秋天的香山公園賞紅葉</li></ul>

在<head>標簽內(nèi)添加<style type="text/css">標簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,用來定義網(wǎng)頁屬性和列表樣式。

body {                                  /*頁面基本屬性*/    

background-color: #CCCCCC;          /*設置頁面背景顏色*/}ul {                                    /*列表樣式*/    color: #CC0000;    

list-style-type: square;            /*項目符號*/}

網(wǎng)頁背景顏色為#CCCCCC,list-style-type:square語句設置了項目符號為正方形。

在CSS中,無論是<ol>還是<ul>都可以使用相同的屬性值,而且效果是完全相同的。例如,本示例中修改<ul>標簽的樣式為項目編號。

ul{                            /*列表樣式*/   color:#CC0000;  

list-style-type:decimal;     /*項目編號*/

可以看到,項目列表按阿拉伯數(shù)字顯示編號,這本身是有序列表<ol>的屬性參數(shù),但是由于在CSS中<ul>和<ol>的分界并不十分嚴格,只要利用list-style-type屬性,二者就可以通用。

【示例2】在網(wǎng)站建設中,當給<ul>或<ol>標簽設置list-style-type屬性時,在它們中間的所有<li>標簽也都默認設置為該屬性,而如果單獨為某個<li>標簽設置list-style-type屬性時,則僅僅作用在該條項目上。啟動Dreamweaver,新建一個網(wǎng)頁,保存為test2.html,在<body>標簽內(nèi)輸入如下代碼:

<h2>北京最吸引人的地方</h2><ul>    

<li>什剎海</li>    

<li>故宮</li>    

<li class="special">音樂會古鋼琴咖啡廳</li>    

<li>北海公園泛舟</li>    

<li>秋天的香山公園賞紅葉</li>

</ul>

在<head>標簽內(nèi)添加<style type="text/css">標簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,用來定義網(wǎng)頁屬性和列表樣式。

body{                                        /*頁面基本屬性*/        

background-color:#CCCCCC;            /*設置頁面背景顏色*/    }ul{                                          /*列表樣式*/   

color:#CC0000;      list-style-type:disc;                 /*項目符號為實心圓*/}

.special{      

list-style-type:square;               /*單獨設置項目符號為正方形*/}

可以看到,單獨設置的<li>標簽和其他標簽的符號是不同的。

提示:在網(wǎng)頁設計中,list-style-type屬性在<ul>標簽中默認的參數(shù)是實心圓,如果在沒有設置list-style-type屬性時,列表的項目符號將顯示為實心圓,在<ol>標簽中默認的項目編號是阿拉伯數(shù)字,如果希望列表不顯示任何符號或編號,需要添加聲明語句:list-style-type:none。

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:0871-63535511(點擊可一鍵撥號)