整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
們知道在 HTML 中列表可以分為無序列表、有序列表、定義列表。在網(wǎng)頁(yè)中經(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)記的類型，和 HTML 中列表標(biāo)簽中的 type 屬性類似。
常用值屬性值如下所示：
示例：
下面是一個(gè)沒有添加任何樣式的列表：
如果我們希望去掉列表前面默認(rèn)的圓點(diǎn)，可以通過將 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 屬性來替代。
示例：
例如我們將上面列表項(xiàng)的標(biāo)記設(shè)置為一個(gè)圖像（圖片大小為50x50），屬性值為圖像路徑：
ul{
list-style-image: url(./flower.png);
}
在瀏覽器中的演示效果：
list-style-position 屬性用于設(shè)置在何處放置列表項(xiàng)標(biāo)記。
屬性值有如下所示：
示例：
例如我們可以設(shè)置兩組不同的列表，分別將 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>
CSS 樣式代碼：
.ul1{
list-style-position: inside;
}
.ul2{
list-style-position: outside;
}
在瀏覽器中的演示效果：
可以明顯的看到，第一組列表的標(biāo)記放置在文本內(nèi)，第二組列表的標(biāo)記位于文本的左側(cè)。
list-style 屬性是一個(gè)簡(jiǎn)寫屬性，是上述幾個(gè)列表屬性的簡(jiǎn)寫形式，用于把所有列表的屬性設(shè)置在一個(gè)聲明中。
屬性設(shè)置順序?yàn)椋簂ist-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。
列表是一個(gè)接一個(gè)顯示條目的首選方式，而不是使用<br>標(biāo)記。完整的列表定義包括開始和結(jié)束標(biāo)記，以及表示列表中每個(gè)條目的標(biāo)記。
有三種類型的列表：有序列表、無序列表和定義列表。
無序列表是一個(gè)帶條目符號(hào)的列表，類似于菜單。
無序列表 - <ul> ... </ul>
ul標(biāo)記定義無序列表的開始和結(jié)束，列表項(xiàng)包含在ul標(biāo)記中。
無序列表項(xiàng) - <li> ... </li>
li標(biāo)記添加每個(gè)條目的文本，每個(gè)列表項(xiàng)必須有自己的li標(biāo)記。
符號(hào)類型 <ul type="disc | circle | square">
默認(rèn)情況下，瀏覽器將顯示圓形條目符號(hào)。這可以通過使用ul標(biāo)記的type屬性來更改，這將更改整個(gè)列表的條目符號(hào)類型。
條目符號(hào)類型 <li type="?">
通過設(shè)置li標(biāo)記的type屬性，可以為列表中的某個(gè)條目設(shè)置不同的符號(hào)類型。
以下是無序列表的示例：
瀏覽器顯示內(nèi)容如下所示：
SS列表屬性作用有三類，這章介紹列表項(xiàng)標(biāo)記為圖像。
（1）編輯代碼
打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示。
例子解釋：
在單個(gè)屬性中可以指定所有的列表屬性。這就是所謂的簡(jiǎn)寫屬性。
為列表使用簡(jiǎn)寫屬性，列表樣式屬性設(shè)置如下：
（1）編輯代碼
打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
