css属性 list-style 纵向菜单、横向菜单

参考：ullicss做横向菜单

菜单制作步骤：

• 1，建立一个无序列表
• 2，隐藏li的默认样式（因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。）.testul{list-style:noneoutsidenone;}
• 3，关键的浮动（此时默认显示的是纵向菜单，如果要变成横向菜单，那么必须给li增加浮动属性.testli{float:left;}）
• 4，调整宽度（菜单都挤在一起不好看怎么办？我们来调节li的宽度。）.testli{float:left;width:100px;}
• 5，设置基本链接效果.testa:link{color:#666;background:#CCC;text-decoration:none;}.testa:visited{color:#666;text-decoration:underline;}.testa:hover{color:#FFF;font-weight:bold;text-decoration:underline;background:#F00;}
• 6，将链接以块级元素显示（菜单链接的背景色为什么没有填满整个li的宽度？恩，解决的方法很简单，在a的样式定义中增加display:block，使链接以块级元素显示）.testa{display:block；text-align:center;height:30px;}.testli{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}

list-style属性：在一个声明中设置所有的列表（无序列表ul、有序列表ol）属性。

该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有display为list-item的元素，所以在普通的HTML和XHTML中只能用于li元素，不过实际上它可以应用到任何元素，并由list-item元素继承。

可以按顺序设置如下属性：

• list-style-type
• list-style-position
• list-style-image

可以不设置其中的某个值，比如"list-style:circleinside;"也是允许的。未设置的属性会使用其默认值。

可能值：

• list-style-type设置列表项标记的类型。参阅：list-style-type中可能的值。
• list-style-position设置在何处放置列表项标记。参阅：list-style-position中可能的值。
• list-style-image使用图像来替换列表项的标记。参阅：list-style-image中可能的值。
• inherit规定应该从父元素继承list-style属性的值。

list-style-type属性：设置列表项标记的类型。

可能值：

• none无标记。
• disc默认。标记是实心圆。
• circle标记是空心圆。
• square标记是实心方块。
• decimal标记是数字。
• …参考http://www.w3school.com.cn/css/pr_list-style-type.asp

list-style-position属性：设置在何处放置列表项标记。

该属性用于声明列表标志相对于列表项内容的位置。外部(outside)标志会放在离列表项边框边界一定距离处，不过这距离在CSS中未定义。内部(inside)标志处理为好像它们是插入在列表项内容最前面的行内元素一样。

可能值：

• outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
• inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
• inherit规定应该从父元素继承list-style-position属性的值。

list-style-image属性：使用图像来替换列表项的标记。

这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用list-style-position属性控制。

可能值：

• none默认。无图形被显示。
• URL图像的路径。
• inherit规定应该从父元素继承list-style-image属性的值。