時(shí)間：2023-09-26 12:30:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-26 12:30:02 來源：網(wǎng)站運(yùn)營
CSS 列表樣式：我們知道在 HTML 中列表可以分為無序列表、有序列表、定義列表。在網(wǎng)頁中經(jīng)?？梢钥吹綗o序列表的使用，例如像導(dǎo)航欄菜單、新聞列表、商品分類、圖片展示等，基本都是通過無序列表來實(shí)現(xiàn)的。
在線咨詢
list-sytle-type 屬性用于設(shè)置列表項(xiàng)的標(biāo)記的類型，和 HTML 中列表標(biāo)簽中的 type 屬性類似。none，也就是用于去掉列表項(xiàng)的標(biāo)記。list-style-type 屬性設(shè)置為 none 來實(shí)現(xiàn)：ul{ list-style-type: none;}在瀏覽器中的演示效果：list-style-image 屬性用于使用圖像來替換列表項(xiàng)的標(biāo)記。但有一點(diǎn)需要注意，如果我們?cè)O(shè)置了 list-style-image 屬性，這個(gè)時(shí)候設(shè)置的 list-sytle-type 屬性將不起作用。一般為了防止某些瀏覽器不支持 list-style-image 屬性，我們會(huì)設(shè)置一個(gè) list-style-type 屬性來替代。ul{ list-style-image: url(./flower.png);}在瀏覽器中的演示效果：list-style-position 屬性用于設(shè)置在何處放置列表項(xiàng)標(biāo)記。list-style-position 屬性設(shè)置為outside 和 inside 來進(jìn)行對(duì)比：<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS學(xué)習(xí)(9xkd.com)</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <ul class="ul1"> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li> <li>第三項(xiàng)</li> <li>第四項(xiàng)</li> <li>第五項(xiàng)</li> </ul> <ul class="ul2"> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li> <li>第三項(xiàng)</li> <li>第四項(xiàng)</li> <li>第五項(xiàng)</li> </ul> </body></html>.ul1{ list-style-position: inside;}.ul2{ list-style-position: outside;}在瀏覽器中的演示效果：list-style 屬性是一個(gè)簡(jiǎn)寫屬性，是上述幾個(gè)列表屬性的簡(jiǎn)寫形式，用于把所有列表的屬性設(shè)置在一個(gè)聲明中。list-style-position、list-style-image，也可以不設(shè)置其中某個(gè)屬性，如果不設(shè)置則采用默認(rèn)值。list-style-type 屬性值為 square、list-style-position 屬性值為 inside、list-style-image 屬性值為 url(./flower.png)：ul{ list-style:square inside url(./flower.png);}在瀏覽器中的演示效果：list-style-type:none。關(guān)鍵詞：樣式
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
