如下图是360浏览器主页的内容，上边有导航，下边是新闻列表，这种布局很常见，今天就来学习css列表属性之后并制作它。
列表属性
html有三种类型的列表：无序列表，有序列表和自定义列表。设置列表标记有序号，圆点，圆圈，图片等多种形式。
list-style：简写属性，用于把下边三个属性声明到一起。
- list-style-type ： 属性指定列表项标记的类型(实心圆、空心圆、方框等)。
- list-style-position ： 设置列表中标记项的相对位置。
- 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属性值。
代码示例：
代码语言：javascript复制/* list-style简写设置它的三个属性值 */
list-style: square inside url("bg.jpg") ;
/* 等同于下边的样式 */
list-style-type:square;
list-style-position:inside;
list-style-image:url("bg.jpg");
