整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們知道在 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。
列表是一個接一個顯示條目的首選方式，而不是使用<br>標記。完整的列表定義包括開始和結束標記，以及表示列表中每個條目的標記。
有三種類型的列表：有序列表、無序列表和定義列表。
無序列表是一個帶條目符號的列表，類似于菜單。
無序列表 - <ul> ... </ul>
ul標記定義無序列表的開始和結束，列表項包含在ul標記中。
無序列表項 - <li> ... </li>
li標記添加每個條目的文本，每個列表項必須有自己的li標記。
符號類型 <ul type="disc | circle | square">
默認情況下，瀏覽器將顯示圓形條目符號。這可以通過使用ul標記的type屬性來更改，這將更改整個列表的條目符號類型。
條目符號類型 <li type="?">
通過設置li標記的type屬性，可以為列表中的某個條目設置不同的符號類型。
以下是無序列表的示例：
瀏覽器顯示內容如下所示：
SS列表屬性作用有三類，這章介紹列表項標記為圖像。
（1）編輯代碼
打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示。
例子解釋：
在單個屬性中可以指定所有的列表屬性。這就是所謂的簡寫屬性。
為列表使用簡寫屬性，列表樣式屬性設置如下：
（1）編輯代碼
打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
