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