6.列表与链接设置

6 列表与链接设置

素材：

添加css样式：

1 list-style-type:列表项标记

实心小黑圆点:默认值  disc

空心小圆点 circle

实心小方块 square

有序列表一般都不用，基本上都是适应无序列表模拟有序列表

模拟有序列表：

数字:将无序列表转为有序列表

list-style-type:decimal

带前导0的数字

list-style-type:decimal-leading-zero;

<![if !supportLists]>2. <![endif]>列表项图像:list-style-image

3.设置列表符号的位置

list-style-position：inside，outside

需先给ul设置背景，不然看不出效果

再给li设置背景  

这个时候，我们就可以明显看到图片处于li的外面 即默认为outside

list-style-position: inside

让图片处于li里面，位于同一个盒子中

美化列表项

div取消背景颜色，设置边框线，圆角

让标题离左边圆点，因为padding会撑大盒子，所以放在父元素list中

取消ul，li的背景

链接

取消链接下划线

添加伪类

鼠标悬停，链接出现下划线，颜色变为红色，字体变大

 最终源码：图文混排代码