我們知道在 HTML 中列表可以分為無序列表、有序列表、定義列表。在網(wǎng)頁中經(jīng)常可以看到無序列表的使用，例如像導(dǎo)航欄菜單、新聞列表、商品分類、圖片展示等，基本都是通過無序列表來實(shí)現(xiàn)的。

無序列表中每個(gè)列表項(xiàng)前面都會(huì)默認(rèn)帶一個(gè)圓點(diǎn)符號(hào)，然而一般我們平時(shí)在網(wǎng)站上看到的列表樣式，通常前面是沒有圓點(diǎn)符號(hào)的，所以我們要如何去掉這個(gè)默認(rèn)的圓點(diǎn)符號(hào)呢？這些都可以通過 CSS 中的列表屬性來實(shí)現(xiàn)。

本節(jié)要講的 CSS 中的列表屬性有下面四個(gè)：

屬性

描述

list-sytle-type

設(shè)置列表項(xiàng)的標(biāo)記的類型

list-style-position

設(shè)置列表項(xiàng)標(biāo)記相對(duì)于列表項(xiàng)內(nèi)容的位置

list-style-image

將圖片設(shè)置為列表項(xiàng)的標(biāo)記，屬性值為 url('圖片路徑')

list-style

簡(jiǎn)寫列表屬性

list-sytle-type

list-sytle-type 屬性用于設(shè)置列表項(xiàng)的標(biāo)記的類型，和 HTML 中列表標(biāo)簽中的 type 屬性類似。

常用值屬性值如下所示：

屬性

描述

none

無標(biāo)記符號(hào)

disc

默認(rèn)值，實(shí)心圓

circle

空心圓

square

實(shí)心正方形

decimal

數(shù)字

在實(shí)際應(yīng)用中，上述幾種屬性值用的最多的還是 none，也就是用于去掉列表項(xiàng)的標(biāo)記。

示例：

下面是一個(gè)沒有添加任何樣式的列表：

如果我們希望去掉列表前面默認(rèn)的圓點(diǎn)，可以通過將 list-style-type 屬性設(shè)置為 none 來實(shí)現(xiàn)：

ul{

list-style-type: none;

}

在瀏覽器中的演示效果：

list-style-image

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 屬性來替代。

示例：

例如我們將上面列表項(xiàng)的標(biāo)記設(shè)置為一個(gè)圖像(圖片大小為50x50)，屬性值為圖像路徑：

ul{

list-style-image: url(./flower.png);

}

在瀏覽器中的演示效果：

list-style-position

list-style-position 屬性用于設(shè)置在何處放置列表項(xiàng)標(biāo)記。

屬性值有如下所示：

屬性值

描述

outside

默認(rèn)值，保持標(biāo)記位于文本的左側(cè)，列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊

inside

表示列表項(xiàng)目標(biāo)記放置在文本內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊

示例：

例如我們可以設(shè)置兩組不同的列表，分別將 list-style-position 屬性設(shè)置為outside 和 inside 來進(jìn)行對(duì)比：

CSS學(xué)習(xí)(9xkd.com)

• 第一項(xiàng)
• 第二項(xiàng)
• 第三項(xiàng)
• 第四項(xiàng)
• 第五項(xiàng)

• 第一項(xiàng)
• 第二項(xiàng)
• 第三項(xiàng)
• 第四項(xiàng)
• 第五項(xiàng)

CSS 樣式代碼：

.ul1{

list-style-position: inside;

}

.ul2{

list-style-position: outside;

}

在瀏覽器中的演示效果：

可以明顯的看到，第一組列表的標(biāo)記放置在文本內(nèi)，第二組列表的標(biāo)記位于文本的左側(cè)。

list-style

list-style 屬性是一個(gè)簡(jiǎn)寫屬性，是上述幾個(gè)列表屬性的簡(jiǎn)寫形式，用于把所有列表的屬性設(shè)置在一個(gè)聲明中。

屬性設(shè)置順序?yàn)?#xff1a;list-style-type、list-style-position、list-style-image，也可以不設(shè)置其中某個(gè)屬性，如果不設(shè)置則采用默認(rèn)值。

示例：

例如設(shè)置一個(gè)簡(jiǎn)寫列表樣式，其中 list-style-type 屬性值為 square、list-style-position 屬性值為 inside、list-style-image 屬性值為 url(./flower.png)：

ul{

list-style:square inside url(./flower.png);

}

在瀏覽器中的演示效果：

本節(jié)我們講了 CSS 中的幾個(gè)列表樣式，一般我們用的最多的就是如何去掉列表項(xiàng)的默認(rèn)標(biāo)記，即 list-style-type:none。

總結(jié)

以上是生活随笔為你收集整理的html中正方形列表标签属性,CSS 列表样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。