web前端开发课-css列表样式list-style #软件开发

web 前端开发课程：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，可以看到花就跑到列表像的里边来了。