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

  • 2019-09-03 15:57:24
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來(lái)源:http://www.americanwasteexpansions.com

設置項目符號

網(wǎng)站建設中,使用list-style-type屬性來(lái)定義列表的項目符號。具體用法如下:

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

該屬性的參數值說(shuō)明如表所示。

d59212edea11698a7e8ab312a3804c3f.jpg

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

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

<li>什剎海</li>    

<li>故宮</li>    

<li>音樂(lè )會(huì )古鋼琴咖啡廳</li>    

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

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

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

body {                                  /*頁(yè)面基本屬性*/    

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

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

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

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

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

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

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

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

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

<li>什剎海</li>    

<li>故宮</li>    

<li class="special">音樂(lè )會(huì )古鋼琴咖啡廳</li>    

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

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

</ul>

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

body{                                        /*頁(yè)面基本屬性*/        

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

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

.special{      

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

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

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

當前文章標題:如何在網(wǎng)頁(yè)設計中定義列表樣式

當前URL:http://www.americanwasteexpansions.com/news/wzzz/3088.html

上一篇:設計網(wǎng)頁(yè)中的自定義列表

下一篇:在網(wǎng)頁(yè)設計中自定義項目符號

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)