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