共计 3105 个字符，预计需要花费 8 分钟才能阅读完成。
这篇咱们学习 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>li3)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，设置列表项标记为数字。拷贝两组款式，批改选择器 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;
}文章配套视频链接：https://www.bilibili.com/vide…