css列表属性和样式控制

如下图是360浏览器主页的内容，上边有导航，下边是新闻列表，这种布局很常见，今天就来学习css列表属性之后并制作它。

css列表属性和样式控制

列表属性

html有三种类型的列表：无序列表，有序列表和自定义列表。设置列表标记有序号，圆点，圆圈，图片等多种形式。

list-style：简写属性，用于把下边三个属性声明到一起。

1. list-style-type ： 属性指定列表项标记的类型(实心圆、空心圆、方框等)。
2. list-style-position ： 设置列表中标记项的相对位置。
3. list-style-image ： 将图像设置为列表项标志。

list-style-type的属性值：

• none：无标记。
• disc：标记实心圆。不设置的时候默认disc。
• circle：空心圆。
• square：实心方块。
• decimal：标记是数字。
• lower-roman：小写罗马数字(i,ii,iii,iv……)
• lower-latin：小写拉丁字母(a,b,c,d……)……
• 还有一些比较见得少的，此处不添加，需要了可自行到w3c中查看。

list-style-position的属性值

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

代码示例：

/* list-style简写设置它的三个属性值 */
list-style: square inside url("bg.jpg") ;
/* 等同于下边的样式 */
list-style-type:square;
list-style-position:inside;
list-style-image:url("bg.jpg");