CSS 列表樣式(ul)
CSS 列表
CSS列表屬性作用如下:
設(shè)置不同的列表項(xiàng)標(biāo)記為有序列表
設(shè)置不同的列表項(xiàng)標(biāo)記為無(wú)序列表
設(shè)置列表項(xiàng)標(biāo)記為圖像
列表
在HTML中,有兩種類型的HTML列表:
無(wú)序列表 - 列表項(xiàng)標(biāo)記用特殊圖形(如小黑點(diǎn)、小方框等)
有序列表 - 列表項(xiàng)的標(biāo)記有數(shù)字或字母
使用CSS,可以列出進(jìn)一步的樣式,并可用圖像作列表項(xiàng)標(biāo)記。
不同的列表項(xiàng)標(biāo)記
list-style-type屬性指定列表項(xiàng)標(biāo)記的類型是:
實(shí)例
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
一些值是無(wú)序列表,以及有些是有序列表。
下列是對(duì)list-style-type屬性的常見(jiàn)屬性值的描述:
none:不使用項(xiàng)目符號(hào)
disc:實(shí)心圓
circle:空心圓
square:實(shí)心方塊
decimal:阿拉伯?dāng)?shù)字
lower-alpha:小寫(xiě)英文字母
upper-alpha:大寫(xiě)英文字母
lower-roman:小寫(xiě)羅馬數(shù)字
upper-roman:大寫(xiě)羅馬數(shù)字
作為列表項(xiàng)標(biāo)記的圖像
要指定列表項(xiàng)標(biāo)記的圖像,使用列表樣式圖像屬性:
實(shí)例
ul
{
list-style-image: url('sqpurple.gif');
}
上面的例子在所有瀏覽器中顯示并不相同,IE和Opera顯示圖像標(biāo)記比火狐,Chrome和Safari更高一點(diǎn)點(diǎn)。
提示:利用 list-style-position 可以確定標(biāo)志出現(xiàn)在列表項(xiàng)內(nèi)容之外還是內(nèi)容內(nèi)部。
如果你想在所有的瀏覽器放置同樣的形象標(biāo)志,就應(yīng)使用瀏覽器兼容性解決方案,過(guò)程如下
瀏覽器兼容性解決方案
同樣在所有的瀏覽器,下面的例子會(huì)顯示的圖像標(biāo)記:
實(shí)例
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
例子解釋:
ul:
設(shè)置列表樣式類型為沒(méi)有列表項(xiàng)標(biāo)記
設(shè)置填充和邊距0px(瀏覽器兼容性)
ul中所有l(wèi)i:
設(shè)置圖像的URL,并設(shè)置它只顯示一次(無(wú)重復(fù))
您需要的定位圖像位置(左0px和上下5px)
用padding-left屬性把文本置于列表中
列表 -縮寫(xiě)屬性
在單個(gè)屬性中可以指定所有的列表屬性。這就是所謂的縮寫(xiě)屬性。
為列表使用縮寫(xiě)屬性,列表樣式屬性設(shè)置如下:
實(shí)例
ul {
list-style: square url("sqpurple.gif");
}
如果使用縮寫(xiě)屬性值的順序是:
list-style-type
list-style-position (有關(guān)說(shuō)明,請(qǐng)參見(jiàn)下面的CSS屬性表)
list-style-image
如果上述值丟失一個(gè),其余仍在指定的順序,就沒(méi)關(guān)系。
作者:大學(xué)生新聞網(wǎng) 來(lái)源:大學(xué)生新聞網(wǎng)
發(fā)布時(shí)間:2025-03-28 閱讀:
- CSS Table(表格)
- 垂直對(duì)齊屬性設(shè)置垂直對(duì)齊,比如頂部,底部或中間:
- 03-28 關(guān)注:0
- CSS 列表樣式(ul)
- 在單個(gè)屬性中可以指定所有的列表屬性。這就是所謂的縮寫(xiě)屬性。
- 03-28 關(guān)注:0
- CSS 鏈接(link)
- 特別的鏈接,可以有不同的樣式,這取決于他們是什么狀態(tài)。
- 03-28 關(guān)注:0
- CSS Text(文本)
- 通過(guò)CSS的Text屬性,你可以改變頁(yè)面中文本的顏色、字符間距、對(duì)齊文本、裝飾文本、對(duì)文本進(jìn)行縮進(jìn)等等,你可以觀察下述的一段簡(jiǎn)單的應(yīng)
- 03-27 關(guān)注:2
- CSS 創(chuàng)建
- 當(dāng)讀到一個(gè)樣式表時(shí),瀏覽器會(huì)根據(jù)它來(lái)格式化 HTML 文檔。
- 03-27 關(guān)注:5
- CSS Id 和 Class選擇器
- 如果你要在HTML元素中設(shè)置CSS樣式,你需要在元素中設(shè)置"id" 和 "class"選擇器。
- 03-27 關(guān)注:4