列表樣式屬性 在 中有 種列表、無序列表和有序列表，在工作中無序列表比較常用，無序列表就是 標簽和 標簽組合成的稱之為無序列表，那什麼是有序列表呢？就是 標簽和 標簽組合成的稱之為有序列表，列表的基礎知識就簡單說明下，本章內容主要說明的是如何給列表設置樣式，若有不懂列表是什麼的園友筆者建議去 "W3 ...
列表樣式屬性
- 在
HTML中有2種列表、無序列表和有序列表，在工作中無序列表比較常用，無序列表就是ul標簽和li標簽組合成的稱之為無序列表，那什麼是有序列表呢？就是ol標簽和li標簽組合成的稱之為有序列表，列表的基礎知識就簡單說明下，本章內容主要說明的是如何給列表設置樣式，若有不懂列表是什麼的園友筆者建議去W3school官網進行學習。 - 列表樣式常用的屬性有4種如：
list-style-type、list-style-position、list-style-image、list-style，在這裡就是簡單說明下列表常用的屬性名稱而已，具體使用或每一個屬性值的介紹，在下麵會具體的說明，愛學習的園友不用擔心哦。 - 由於個人的時間問題，筆者將列表樣式屬性分為
4篇文章進行說明。 - 本章內容主要說明的是列表中的
list-style-type屬性。
list-style-type屬性
list-style-type屬性作用:就是設置列表前面項目符號的類型。list-style-type屬性值說明表。
| 屬性值 | 描述 |
|---|---|
| none | 將列表前面項目符號去除掉。 |
| disc | 將列表前面項目符號設置為實心圓。 |
| circle | 將列表前面項目符號設置為空心圓。 |
| square | 將列表前面項目符號設置為實心小方塊。 |
屬性值為none使用方式
- 讓我們進入列表的
list-style-type屬性值為none實踐，實踐內容如：使用class屬性值為.box將列表前面項目符號去除掉。 我們在實踐列表的
list-style-type屬性值為none之前看看列表前面項目符號是什麼，讓初學者有一個直觀的印象。代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type屬性值為none實踐</title>
</head>
<body>
<ul>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
現在愛學習的園友們知道了什麼是列表前面的項目符號了，那我們就進入列表的
list-style-type屬性值為none實踐咯。代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type屬性值為none實踐</title>
<style>
.box{
list-style-type: none;
}
</style>
</head>
<body>
<ul class="box">
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
- 既然能看到這裡說明園友已經掌握了，列表的
list-style-type屬性值為none使用，恭喜恭喜恭喜。
屬性值為disc使用方式
- 在這裡說明下列表的
list-style-type屬性值為disc，列表的list-style-type屬性值預設就是disc，如果是細心的園友已經發現了，上面有現成的列子在這裡就不過多的介紹了，這個屬性值為disc就跳過了哈。
屬性值為circle使用方式
- 讓我進入列表的
list-style-type屬性值為circle實踐，實踐內容如：將列表前面的項目符號設置為空心圓。 代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type屬性值為circle實踐</title>
<style>
.box{
list-style-type: circle;
}
</style>
</head>
<body>
<ul class="box">
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
屬性值為square使用方式
- 讓我們進入列表的
list-style-type屬性值為square實踐，實踐內容如：將列表前面項目符號設置為實心方塊。 代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type屬性值為square實踐</title>
<style>
.box{
list-style-type: square;
}
</style>
</head>
<body>
<ul class="box">
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
