整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eb 前端開發課程：css 列表模塊。
講課人：波波老師。
列表是 html 經常使用的標簽，css 針對列表提供了如下的三個屬性。
1.list-style-type：用于設置列表下標記的類型，例如方塊、圓圈、數字或者字母。
2.list-style-image：可以使用圖像來替代列表下的標記。
3.list-style-position：可以設定標記位于列表項的內部還是外部。
來看一下演示。
1.新建文件 list.html，建一個列表。
2.設置一下格式：style。
3.設置一下 list-style-type，可以看到默認的 disc，也就是點。
4.把它改一下，給它改成一個圓點，可以看到它就成了一個空心的點。
5.再改一下，它就變成了數字了。其實最重要的是有時候想要把這個點去掉，什么都不放就是 none。
6.再引入外部的圖片：list-style-image，ur(image/flow.png')。
7.放在 image 里的 floor，可以看到這朵花就成了每個列表項前面的點綴。
8.還有一個就是先把 Li 做一個背景色，好看清楚它的位置：background-color。
9.可以看到現在花是在列表像的外面，設一下 list-style-position，把它做成 inside，可以看到花就跑到列表像的里邊來了。
們知道在 HTML 中列表可以分為無序列表、有序列表、定義列表。在網頁中經常可以看到無序列表的使用，例如像導航欄菜單、新聞列表、商品分類、圖片展示等，基本都是通過無序列表來實現的。
無序列表中每個列表項前面都會默認帶一個圓點符號，然而一般我們平時在網站上看到的列表樣式，通常前面是沒有圓點符號的，所以我們要如何去掉這個默認的圓點符號呢？這些都可以通過 CSS 中的列表屬性來實現。
本節要講的 CSS 中的列表屬性有下面四個：
list-sytle-type 屬性用于設置列表項的標記的類型，和 HTML 中列表標簽中的 type 屬性類似。
常用值屬性值如下所示：
示例：
下面是一個沒有添加任何樣式的列表：
如果我們希望去掉列表前面默認的圓點，可以通過將 list-style-type 屬性設置為 none 來實現：
ul{
list-style-type: none;
}
在瀏覽器中的演示效果：
list-style-image 屬性用于使用圖像來替換列表項的標記。但有一點需要注意，如果我們設置了 list-style-image 屬性，這個時候設置的 list-sytle-type 屬性將不起作用。一般為了防止某些瀏覽器不支持 list-style-image 屬性，我們會設置一個 list-style-type 屬性來替代。
示例：
例如我們將上面列表項的標記設置為一個圖像（圖片大小為50x50），屬性值為圖像路徑：
ul{
list-style-image: url(./flower.png);
}
在瀏覽器中的演示效果：
list-style-position 屬性用于設置在何處放置列表項標記。
屬性值有如下所示：
示例：
例如我們可以設置兩組不同的列表，分別將 list-style-position 屬性設置為outside 和 inside 來進行對比：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS學習(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;
}
在瀏覽器中的演示效果：
可以明顯的看到，第一組列表的標記放置在文本內，第二組列表的標記位于文本的左側。
list-style 屬性是一個簡寫屬性，是上述幾個列表屬性的簡寫形式，用于把所有列表的屬性設置在一個聲明中。
屬性設置順序為：list-style-type、list-style-position、list-style-image，也可以不設置其中某個屬性，如果不設置則采用默認值。
示例：
例如設置一個簡寫列表樣式，其中 list-style-type 屬性值為 square、list-style-position 屬性值為 inside、list-style-image 屬性值為 url(./flower.png)：
ul{
list-style:square inside url(./flower.png);
}
在瀏覽器中的演示效果：
本節我們講了 CSS 中的幾個列表樣式，一般我們用的最多的就是如何去掉列表項的默認標記，即 list-style-type:none。
標
列表在網頁里使用的頻率非常高，對于新聞類的網站來說，就是百分百的使用。列表的前頭一般都是阿拉伯數字，作為列表的順序。
當然，列表項的前綴是不止阿拉伯數字，還有小圓點'●'、正方形'■'等等，這些都是自帶的樣式。如果你還不滿意，還可以自定義前綴。
各種類型的列表符號
無論是有序列表，還是無序列表，都統一使用list-style-type屬性來定義列表項符號。
語法：list-style-type:屬性值;
有序列表自帶的符號，都是跟順序有關。
屬性值
更換了前綴的有序列表如下
更換效果
無序列表自帶的符號，都是小圖標，跟順序沒關系
屬性值
更換了前綴的無序列表如下
更換效果
雖然列表項有自帶樣式，但很多時候都不是我們想要的效果，就可以使用自定義符號。通過list-style-image:url(圖像地址)來設置。
語法：list-style-image:url(圖像地址);
自定義列表項符號，實際上就是列表項符號改為一張圖片
注意圖片的尺寸要把握好，是無法修改大小
代碼設置如下
設置圖片
自定義前綴的列表效果如下
自定義列表符號
list-style-type屬性，實際上更多的使用在取消符號上，幾乎能用到都是在這一點上
幾乎所有的前端框架，在重置樣式的時候，都是使用這個來取消列表項的默認符號
語法：list-style-type:none;
新聞類網站，都會有部分列表項是沒有前綴符號
空白列表符號
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
