什么是CSS列表？
這篇我們學習CSS列表。
對于列表，大家并不陌生。比如下面的無序列表和有序列表。
在 HTML 中，最常用的兩種列表的類型就是無序列表和有序列表，使用 ol 和 ul 元素實現。列表項通過列表元素屬性，實現空心實心圓點和數字字母等不同的形式。
在 CSS 中，列表屬性允許我們為有序列表、無序列表設置不同的列表項標記，甚至可以使用一個圖像，還可以為列表和列表項添加背景顏色。
應用 list-style-type 屬性設置不同的列表項標記。屬性值有很多，
比如：
circle 空心圓點，
disc 實心圓點，
square 小方點，
decimal 數字，
upper-roman 大寫羅馬字母，
lower-alpha 小寫字母等等。
舉個例子。
創建創建 css-list.html 文件和 list-style.css 文件。打開 html 文件，構建基礎代碼，使用 emmet 命令：小括號 ul 大于 li 乘以3 再乘以3 (ul>li*3)*3。回車，創建了三組無序列表。給三個 ul 元素添加 class 屬性，值分別為 a，b，c。給每個列表項填入一些文本。
HTML
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>Vue</li>
<li>React</li>
<li>小程序</li>
</ul>
<ul class="c">
<li>大前端</li>
<li>前端架構</li>
</ul>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="e">
<li>Vue</li>
<li>React</li>
<li>小程序</li>
</ol>
<ol class="f">
<li>大前端</li>
<li>前端架構</li>
</ol>
</body>
拷貝這三組無序列表，將 ul 元素名稱修改為 ol，三個 class 值改為 d，e，f。
打開 css 文件，定義選擇器 ul.a，聲明樣式 list-style-type: circle，設置列表項標記為空心圓點。拷貝兩組樣式，修改選擇器 ul.b，ul.c。修改 list-style-type 屬性值分別為 disc，實心圓點，square 小方點。
無序列表效果就做好了!
定義選擇器 ol.d，聲明樣式 list-style-type: decimal，設置列表項標記為數字?？截悆山M樣式，修改選擇器 ol.e，ol.f。修改 list-style-type 屬性值分別為 upper-roman，大寫羅馬字母，lower-alpha 小寫字母。
有序列表也實現了!
CSS
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: disc;
}
ul.c {
list-style-type: square;
}
ol.d {
list-style-type: decimal;
}
ol.e {
list-style-type: upper-roman;
}
ol.f {
list-style-type: lower-alpha;
}
有關更多的 list-style-type，大家參照這個案例。
list-style-image 屬性指定了一個圖像作為列表項的標記。屬性值為 url 小括號，括號里寫入圖片的路徑 url('./xxx.gif') 。
舉個例子。
在 html 里，拷貝第一組 ul，將 class 的值改為 g。在 css 里，定義選擇器 ul.g，聲明樣式屬性 list-style-image，值為 url 小括號，圖片路徑為當前目錄下的 purple.gif。
看看效果，列表項用圖片標記了!
除了更換列表項的標記，還可以設置標記的位置，通過 list-style-position 屬性來實現。這個屬性的值有兩個：outside，表示標記在列表項之外。inside，表示標記在列表項內部。
舉個例子。
在 html 里添加一個 h3 元素，填入一些文本。ul 點 h 大于 li 乘以 3 ul.h>li*3，創建一個無序列表，填入一些文本?？截愡@組列表，將 class 值改為 i。
在 css 里定義 ul.h 選擇器，聲明樣式 list-style-position: outside。定義 ul.i 選擇器，聲明樣式 list-style-position: inside。
仔細觀察列表項標記的位置，如果這里畫一條線，就一目了然了，outside，標記在列表內容的左側，也是默認的位置。inside，標記在列表內容里面。
有時，我們不希望顯示列表項標記，此時可以應用 list-style-type: none 來去掉他們。
再復制一組這個列表，將 class 值修改為 j。再定義選擇器 ul.j，聲明樣式 list-style-type: none。
我們看，列表項標記消失了。
同樣，列表屬性也可以使用簡寫——list-style，被用來在一個聲明中，設置所有的列表屬性。屬性值按照 list-style-type list-style-position list-style-image 順序來書寫，某個值缺省的話，就使用它的默認值。
復制兩份列表，修改 class 值分別為 k，l (這個是艾奧)。
HTML
<ul class="k">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="l">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
定義選擇器 ul.k，聲明樣式 list-style: square inside url("purple.gif")。再定義選擇器 ul.l，聲明樣式 list-style: none。
這樣的簡寫，同樣可以定義列表項的標記樣式，方便快捷。
我們還可以用顏色來裝飾列表，使它們看起來更有趣。添加到 ol 或 ul 標簽的任何樣式都會影響整個列表，而添加到 li 標簽的屬性只會影響單個列表項。
在 html 中再復制兩組列表，修改 class 的值分別為 m，n。
HTML
<ul class="m">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="n">
<li>Vue</li>
<li>React</li>
<li>小程序</li>
</ol>
定義 ul.m 選擇器，聲明樣式：background: #3399ff，padding: 20px。
定義 ol.n 選擇器，聲明樣式：background: #ff9999，padding: 20px。
定義 ul.m li 選擇器，聲明樣式：background: #cce5ff，color: darkblue，margin: 5px。
定義 ol.n li 選擇器，聲明樣式：background: #ffe5e5，color: darkred，padding: 5px，margin-left: 35px。
這樣，列表就裝飾好了!
這里用到的 padding 和 margin 屬性，給元素添加內外邊距，我們在后面的課程里還會詳細的研究。
CSS
ul.m {
background: #3399ff;
padding: 20px;
}
ol.n {
background: #ff9999;
padding: 20px;
}
ul.m li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
ol.n li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
猜你喜歡LIKE
相關推薦HOT
更多>>
影視剪輯這樣做，你也能火！
看了這么多類型的視頻，最好入手的且漲粉快的莫過于影視剪輯類賬號。不過這也不是隨便剪剪就可以的，也有很多小伙伴不知道怎么制作。如果你要在...詳情>>
2023-04-20 11:19:19
抖音粉絲團怎么升級快
頻繁地發布內容：保持良好的發布頻率，有助于維持用戶的興趣，并吸引新用戶。與其他用戶合作：給其他目標受眾相似的用戶點贊和評論，可以吸引更...詳情>>
2023-04-11 11:45:12
javastringbuffer類有哪些方法
Java中的StringBuffer類和StringBuilder類都可以動態地創建和修改字符串，StringBuffer是線程安全的，而StringBuilder則是非線程安全的。下面是...詳情>>
2023-03-17 16:16:19
pyecharts是什么？主要特點是什么
Pyecharts是一款基于Python語言的開源數據可視化庫，它使用Echarts.js作為底層渲染引擎，支持生成各種常見的圖表，如折線圖、柱狀圖、散點圖、...詳情>>
2023-03-03 11:49:02熱門推薦
發抖音帶話題流量更高？
沸抖音買1000粉會封嗎？那些短視頻運營你不得不知道的事情
熱做短視頻你不得不知道的事情之抖音流量池分配規則
熱影視剪輯這樣做，你也能火！
新抖音發日常和作品有什么不一樣
抖音粉絲團怎么升級快
mysql和mariadb有什么區別
javastringbuffer類有哪些方法
怎樣把mysql卸載干凈?mysql怎么卸載干凈重裝
pyecharts是什么？主要特點是什么
視頻剪輯軟件哪個好?電腦軟件vs手機軟件
vugen(virtualusergenerator)的作用是什么
mvvm的概念、原理及實現
meta viewport是做什么用的？
京公網安備 11010802030320號