范仁义html+css课程---5、列表
一、总结
一句话总结:
学会基本的使用有序列表、无序列表、定义列表,设置样式的话尽量通过css而不是属性
1、无序列表基本形式(实例)?
ul标签包裹li标签:<ul> <li></li> </ul>
<ul>
<li>cpb粉底</li>
<li>雪花秀气垫BB</li>
<li>iope气垫BB</li>
</ul>
2、无序列表的常用属性有哪些?
type属性:有三个值:1.disc(默认值)(实心圆);2.circle(空心圆);3.square(实心方块)
3、有序列表基本形式(实例)?
ol标签包裹li标签:<ol> <li></li> </ol>
<ol> <li>第一步:清洗面部</li> <li>第二部:涂爽肤水</li> <li>第三部:涂乳液</li> <li>第四部:涂防晒</li> </ol>
4、有序列表的常用属性有哪些?
type属性:可以是整数,大小写英文字母,大小写罗马字母
start属性:定义列表的开始序号
reversed属性:定义列表倒序排列
5、自定义列表基本形式(实例)?
dl标签包裹dt和dd标签,dt是概念,dd是相应的解释和描述:<dl> <dt></dt> <dd></dd> </dl>
<dl> <dt>cpb</dt> <dd>日本高端护肤品品牌</dd> <dt>雪花秀</dt> <dd>韩国中高端护肤品品牌</dd> </dl>
二、列表基础知识
课程对应的视频地址:5、列表
https://www.fanrenyi.com/video/2/10
1.无序列表的基本格式
ul(unorder line)标签里面放li标签就好了,每一项就是一个li(LineItem)标签
<ul>
<li></li>
<li></li>
</ul>
2.无序列表的type属性
无序列表的type属性有三个值:1.disc(默认值);2.circle;3.square
分别对应
- 实心圆
- 空心圆
- 实心方块
这里演示的就是ul中type为circle的效果
在css中可以设置更多更加复杂的效果,比如前面加小图片
3.有序列表的基本格式
ol(order line)标签里面放li标签就好了,每一项就是一个li(LineItem)标签
<ol>
<li></li>
<li></li>
</ol>
4.有序列表的type属性
- 整数(默认值);
- 大(小)写字母ABC...
- 大小写的罗马字母:i ii .../I II III
这里设置的ol的type为大写字母A
li标签里面放图片链接都是可以的,元素的嵌套
5.有序列表的start属性
定义列表的开始序号,比如第一项不是数字1,而是从10开始.......
就把ol的start属性设置成不同就可以了
6.有序列表的reversed属性
reversed属性的值为reversed或者true表示倒序排列
比如
reversed="reversed"
7.有序列表的value属性
定义某个单个列表项的序号.......
- 可以通过value属性来设置不连续列表
- 我们之前都是对ol操作,这里是对li操作
- 因为要设置每一项,所以可以每一项任意设置
- 比如说之前是连续的123,这里却跳到了10
- 做法是把跳的那一项li的value属性单独设置成10就好了
- 设置之后,后面的值会在这个设置的值上面递增
8.自定义列表
自定义列表项组成:由 dl定义列表;dt定义列表项目;dd定义列表内容;
<dl>
<dt>列表项目一</dt>
<dd>列表项目一的内容</dd>
<dt>列表项目二</dt>
<dd>列表项目二的内容</dd>
</dl>
列表项目一
列表项目一的内容
列表项目二
列表项目二的内容
8、列表嵌套
列表支持嵌套,比如
<ol type="I" start="5" reversed="reversed"> <li>第一步:清洗面部</li> <li>第二部:涂爽肤水</li> <li>第三部:涂乳液</li> <li>第四部:涂防晒</li> <ol > <li>先涂粉底再涂防晒</li> <li>先涂防晒再涂粉底</li> </ol> </ol>
9、列表在实际开发中的常见应用
长做导航,以及一些列表内容(比如课程章节对应的具体课程)
三、有序列表、无序列表、定义列表 实例
有序列表通常用来表示内容之间的顺序或者是重要性关系,每一个列表都分为多个子项,每一个子项都有相应的编号。
有序列表,列表项包含在<li></li>标签对中,有序列表以<ol></ol>定义,项目前有数字或者字母缩进
无序列表仅仅用于表示内容之间存在有并列关系,也是分为多个子项,但是子项之前没有相应的编号,只有一个原点用于标识。
无序列表,列表项包含在<li></li>标签对中,无序列表以<ul></ul>定义,项目前有符号缩进
自定列表,列表项包含在<dt></dt>标签对中,<dd></dd>与定义项对应的每个定义,自定义列表以<dl></dl>定义,项目前有符号缩进
定义列表通常用于表示名词或者是概念的定义,每一个子项有两个部分组成,第一部分是名词或者是概念,第二部分是相应的解释和描述。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- ol:order list--> <!-- type 列表排序的类型共五种:默认阿拉伯数字,“a”小写字母,"A"大写字母,"I"大写罗马数字排序,"i"小写罗马数字排序--> <!-- start 排序的起始位置,如果type="a" start="5" 那么从字母e开始--> <!-- reversed="true" 倒序排列--> <ol type="I" start="5" reversed="reversed"> <li>第一步:清洗面部</li> <li>第二部:涂爽肤水</li> <li>第三部:涂乳液</li> <li>第四部:涂防晒</li> <ol > <li>先涂粉底再涂防晒</li> <li>先涂防晒再涂粉底</li> </ol> </ol> <!-- 无序列表 unorder list 默认列表项前是小圆点--> <ul> <li>cpb粉底</li> <li>雪花秀气垫BB</li> <li>iope气垫BB</li> </ul> <!-- 定义列表:表达对名词或概念的解释或者描述--> <dl> <dt>cpb</dt> <dd>日本高端护肤品品牌</dd> <dt>雪花秀</dt> <dd>韩国中高端护肤品品牌</dd> </dl> </body> </html>
效果图:
四、参考资料
1、ol标签的属性
2、css列表样式
一、 list-style-type:disc(默认for ul,实心圆);decimal(默认for ol ,数字);none(无标记);circle(空心圆);square(实心方块);decimal-leading-zero(01,02等以0开头的数字);lower-roman(小写罗马数字);upper-roman(大写罗马数字);lower-alpha(小写英文字母);upper-alpha(大写英文字母);
二、list-style-position:outside(默认);inside;inherit;
三、list-style-image:none(默认);url(“img.png”);inherit;