CSS 列表

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

列表类型

要修改用于列表项的标志类型，可以使用属性 list-style-type

ul {list-style-type : square}

<style type="text/css">
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
</style>

CSS2.1 的值：

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit

 

列表项图像

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif)}

<style type="text/css">
ul 
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>

 

列表标志位置

 CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。

<style type="text/css">
ul.inside 
{
　　list-style-position: inside
}
ul.outside 
{
　　list-style-position: outside
}
</style>

 

 

 

简写列表样式

 为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

       li {list-style : url(example.gif) square inside}

 

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄