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

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

設(shè)置項(xiàng)目符號(hào)

網(wǎng)站建設(shè)中,使用list-style-type屬性來(lái)定義列表的項(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ù)值說(shuō)明如表所示。

d59212edea11698a7e8ab312a3804c3f.jpg

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

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

<li>什剎海</li>    

<li>故宮</li>    

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

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

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

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

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

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

list-style-type: square;            /*項(xiàng)目符號(hào)*/}

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

在CSS中,無(wú)論是<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)頁(yè),保存為test2.html,在<body>標(biāo)簽內(nèi)輸入如下代碼:

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

<li>什剎海</li>    

<li>故宮</li>    

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

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

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

</ul>

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

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

background-color:#CCCCCC;            /*設(shè)置頁(yè)面背景顏色*/    }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)頁(yè)設(shè)計(jì)中,list-style-type屬性在<ul>標(biāo)簽中默認(rèn)的參數(shù)是實(shí)心圓,如果在沒(méi)有設(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),需要添加聲明語(yǔ)句:list-style-type:none。

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

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3088.html

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

下一篇:在網(wǎng)頁(yè)設(shè)計(jì)中自定義項(xiàng)目符號(hào)

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