Download presentation
Presentation is loading. Please wait.
1
武汉纺织大学传媒学院 cm.wtu.edu.cn
第20节 CSS列表样式 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/5/3 传媒学院
2
1.列表样式 对应“CSS规则定义”面板的“列表” 2019/5/3 传媒学院
3
2.设置样式 “类型”属性 图像列表 “位置”属性 对应的是列表项前面的修饰符 使用图片作为列表项的修饰符 默认是“外”：表示向外凸出
2019/5/3 传媒学院
4
例子 位置：内 2019/5/3 传媒学院
5
3.排列方式 列表的默认排列方式是竖排 li标记类似div，默认情况下，是显示一个li，换一行，再显示一个li
如果要横排，则要设置li的浮动属性为左对齐，也就是显示一个li标记后，下一个要显示的li标记不换行，而是挨着显示，并且左对齐， 注：每个要横排的li标记都要设置 2019/5/3 传媒学院
6
例子 类型：无 2019/5/3 传媒学院
7
4.调节列表项 li项之间的间隔 设置li的边界 li项的大小 把li作为一个矩形模块来设置宽度、高度等属性 2019/5/3 传媒学院
8
作业 制作一个横排的无序列表，每个列表项的宽度为100px，列表项之间的间隔为10px，且列表项的背景颜色为天蓝色，列表文字内容居中，比如
2019/5/3 传媒学院
Similar presentations
