CSS页面布局技巧(四)
2017-07-17 10:48
253 查看
列表样式
1、无序列表
无序列表是指列表符为圆点或者其他图形而非数字。无序列表语法为:<ul> <li>**</li> <li>**</li> ...... </ul>
其中ul的作用是说明其包含的列表是无序列表,每组li用于包含一个列表项目。
2、有序列表
有序列表的列表符为数字。有序列表语法为:<ol> <li>**</li> <li>**</li> ...... </ol>
其中ol的作用是说明其包含的列表是有序列表,每组li用于包含一个列表项目。
3、定义列表
定义列表在使用中较少出现,其语法为:<dl> <dt> <dd>**</dd> </dt> ...... </dl>
其中dl的作用是说明其包含的列表是定义列表,一般dt定义一个概念,dd是对该概念的解释。
4、改变列表符的样式
CSS提供list-style-type、list-style-image、list-style-position属性来改变列表符的样式。使用自带列表符
语法:
list-style-type:type;
若type=none,则列表不带列表符。常用的type有:
square(实心方块)
disc(实心圆)
cicle(空心圆)
decimal(阿拉伯数字)
lower-roman(小写罗马字母)
upper-roman(大写罗马字母)
使用背景图片作为列表符
根据需要,有时候列表符可以使用较小的图片来代替,语法为:
list-style-image:url(picture.png);
改变列表符的位置
列表符可以嵌入文本中,也可以在文本内容之外,语法为:
list-style-position:inside/outside;
列表符属性的简写
以下代码:
list-style-image:url(picture.png); list-style-position:inside/outside;
可以简写为:
list-style: url(picture.png) inside/outside;
注意:一般情况下,list-style-type和list-style-image不会同时使用,因为后者会覆盖前者。
相关文章推荐
- CSS技巧荟萃:了解CSS页面布局和加载流程
- CSS页面布局技巧(二)
- CSS页面布局技巧(三)
- CSS技巧荟萃:了解CSS页面布局和加载流程
- CSS技巧荟萃:了解CSS页面布局和加载流程
- CSS页面布局技巧
- CSS技巧荟萃:了解CSS页面布局和加载流程
- css布局小技巧---1:有一侧宽度固定,另一侧随浏览器及分辨率改变而改变的css页面布局
- css后台页面布局技巧
- CSS页面布局技巧(一)
- CSS技巧荟萃:了解CSS页面布局和加载流程
- CSS技巧荟萃:了解CSS页面布局和加载流程
- Appcan开发之页面布局与CSS排版(转)
- 精通CSS.DIV网页样式与布局(四) ——页面背景
- DIV+CSS页面布局中注意的问题以及常用的CSS使用方法
- <div+css页面布局课堂笔记>8---页面浮动设计
- 如何用div+css布局页面
- <div+css页面布局课堂笔记>5---与盒子相关的CSS属性第二部分
- css页面布局之左侧定宽,右侧自适应
- DIV+CSS页面布局模版