如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。
?
html有三种类型的列表:无序列表,有序列表和自定义列表。设置列表标记有序号,圆点,圆圈,图片等多种形式。
list-style:简写属性,用于把下边三个属性声明到一起。
- list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。
- list-style-position : 设置列表中标记项的相对位置。
- list-style-image : 将图像设置为列表项标志。
- none:无标记。
- disc:标记实心圆。不设置的时候默认disc。
- circle:空心圆。
- square:实心方块。
- decimal:标记是数字。
- lower-roman:小写罗马数字(i,ii,iii,iv……)
- lower-latin:小写拉丁字母(a,b,c,d……)……
- 还有一些比较见得少的,此处不添加,需要了可自行到w3c中查看。
- 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");