本篇将主要介绍列表的CSS样式编写,在学习之前,我们回忆一下HTML中的有序列表和无序列表。
举例:
1 2 3 4 5 6 7 8 9 10 11 12 | < span >无序列表-我的爱好:</ span > < ul > < li >咖啡</ li > < li >牛奶</ li > < li >果汁</ li > </ ul > < span >有序列表-成绩排行:</ span > < ol > < li >张三</ li > < li >李四</ li > < li >赵五</ li > </ ol > |
运行结果如下:
css列表属性作用:
(1)设置不同的列表项标记为有序列表
(2)设置不同的列表项标记为无序列表
(3)设置列表项标记为图像
在html中,有两种类型的html列表:
(1)无序列表:列表项的标记使用特殊图形(如小黑点、小方框等)
(2)有序列表:列表项的标记使用数字或字母
(3)使用css,可以列出进一步的样式,并可用图像作列表项标记
列表-简写属性
在单个属性中可以指定所有的列表属性,这就是所谓的简写属性,使用缩写属性值的顺序是:
1. list-style-type
2. list-style-position
3. list-style-image
在简写属性时,如果上述值丢失一个,其余仍在指定的顺序,就没影响。
1. list-style-type无序列表样式
值 | 描述 |
none | 无标记 |
disc | 默认值,标记为实心圆 |
circle | 将标记设置为空心圆 |
square | 将标记设置为实心方块 |
decimal | 将标记设置为数字 |
decimal-leading-zero | 将标记设置为以 0 开头的数字标记,例如 01、02、03 |
lower-roman | 将标记设置为小写罗马数字,例如 i、ii、iii、iv、v |
upper-roman | 将标记设置为大写罗马数字,例如 I、II、III、IV、V |
lower-alpha | 将标记设置为小写英文字母,例如 a、b、c、d、e |
upper-alpha | 将标记设置为大写英文字母,例如 A、B、C、D、E |
lower-greek | 将标记设置为小写希腊字母,例如 α、β、γ、δ、ε |
lower-latin | 将标记设置为小写拉丁字母,例如 a、b、c、d、e |
upper-latin | 将标记设置为大写拉丁字母,例如 A、B、C、D、E |
hebrew | 将标记设置为传统的希伯来编号 |
armenian | 将标记设置为传统的亚美尼亚编号 |
georgian | 将标记设置为传统的乔治亚编号 |
cjk-ideographic | 将标记设置为中文数字,例如 一、二、三、四、五 |
hiragana | 将标记设置为日文平假名字符,例如 あ、い、う、え、お |
katakana | 将标记设置为日文片假名字符,例如 ア、イ、ウ、エ、オ |
hiragana-iroha | 将标记设置为日文平假名序号 |
katakana-iroha | 将标记设置为日文片假名序号 |
举例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < style > .ul-none { list-style-type: none; } .ul-circle { list-style-type: circle; } .ul-square { list-style-type: square; } </ style > </ head > < body > < ul > < li >篮球</ li > < li >足球</ li > < li >乒乓球</ li > </ ul > < ul class = "ul-none" > < li >篮球</ li > < li >足球</ li > < li >乒乓球</ li > </ ul > < ul class = "ul-circle" > < li >篮球</ li > < li >足球</ li > < li >乒乓球</ li > </ ul > < ul class = "ul-square" > < li >篮球</ li > < li >足球</ li > < li >乒乓球</ li > </ ul > </ body > </ html > |
运行结果:
举例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> < html > < head > < style > ul { list-style-type: circle; } ol { float: left; } .ol_one { list-style-type: lower-roman; } .ol_two { list-style-type: lower-greek; } .ol_three { list-style-type: georgian; } </ style > </ head > < body > < ul > < li >姓名</ li > < li >性别</ li > < li >籍贯</ li > </ ul > < ol class = "ol_one" > < li >姓名</ li > < li >性别</ li > < li >籍贯</ li > </ ol > < ol class = "ol_two" > < li >姓名</ li > < li >性别</ li > < li >籍贯</ li > </ ol > < ol class = "ol_three" > < li >姓名</ li > < li >性别</ li > < li >籍贯</ li > </ ol > </ body > </ html > |
运行结果:
2. list-style-position有序列表样式
值 | 描述 |
inside | 列表项前的标记放置在之后的文本以内,列表项中的文本会根据标记对齐 |
outside | 默认值,保持标记位于文本的左侧,列表项前的标记放置在文本以外,并且列表项中的文本不会根据标记对齐 |
inherit | 从父元素继承 list-style-position 属性的值 |
举例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> < html > < head > < style > ol { list-style-type: lower-roman; } li { background: #ccc; margin-bottom: 2px; } .ol_one { list-style-position: inside; } .ol_two { list-style-position: outside; } </ style > </ head > < body > < ol class = "ol_one" > < li >姓名</ li > < li >性别</ li > < li >电话</ li > </ ol > < ol class = "ol_two" > < li >地址</ li > < li >邮编</ li > < li >邮件</ li > </ ol > </ body > </ html > |
运行结果:
3. list-style-image修改列表标记图像
值 | 描述 |
URL | 图像的路径 |
none | 默认值,不显示任何图像 |
inherit | 从父元素继承 list-style-image 属性的值 |
4. list-style
ist-style 属性是上述三个属性(list-style-type、list-style-position、list-style-image)的简写,使用 list-style 可以同时设置上面的三个属性,其语法格式如下:
1 | list-style: list-style-type || list-style-position || list-style-image; |
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:
一点编程也不会写的:零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码?手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程