CSS补充-列表属性

css列表属性

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

列表类型

在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

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

ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。

disc（实心圆点）

circle（空心圆点）

square（实心方块）

none（没有样式）

列表项图像

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

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

只需要简单地使用一个 url() 值，就可以使用图像作为标志。

列表标志位置

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

简写列表样式

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

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

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

list-style：

ul{list-style:none;}

实现了去掉列表前面的符号

列表实现导航栏布局：

div{background-color:#0dfaff;height:50px;}ul{list-style:none;color:#ff1d40;font-size:30px;}li{float:left;width:170px;line-height:50px;}li:first-child{margin-left:50px;}

<div><ul><li>购物车</li><li>帮助中心</li><li>加入收藏</li><li>设为首页</li><li>登录</li><li>注册</li></ul></div>