今天我们分享关于列表样式的内容。
列表项list-sytle-type：
在HTML学习中，我们知道有有序列表和无序列表，都是使用type属性来定义的。
1、有序列表
<ol type="属性值"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol>
属性值type：
1，数字1、2、3……；
a，小写英文字母a、b、c……；
A，大写英文字母A、B、C……；
i，小写罗马数字i、ii、iii……；
I，大写罗马字母I、II、III……；
2、无序列表
<ul type="属性值"><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul>
属性值type：
dics，默认值，实心圆；
circle，空心圆；
square，实心正方形；
在css中，不管是有序列表还是无序列表，都统一使用list-style-type属性来定义。
语法：
list-style-type:属性值；
| 有序列表list-style-type属性取值 | |
| 属性值 | 说明 |
| decimal | 默认值，数字1、2、3 |
| lower-roman | 小写罗马数字i、ii、iii |
| upper-roman | 大写罗马数字I、II、III |
| lower-alpha | 小写英文字母a、b、c |
| upper-alpha | 大写英文字母A、B、C |
| 无序列表list-style-type属性取值 | |
| 属性值 | 说明 |
| disc | 默认值，实心圆 |
| circle | 空心圆 |
| square | 实行正方形 |
| 去除列表项符号 | |
| 属性值 | 说明 |
| none | 无，去除 |
示例代码：
<html><head><title>列表项</title><style type="text/css">#ol1 { list-style-type:decimal;}#ol2 { list-style-type:lower-roman;}#ol3 { list-style-type:upper-roman;}#ol4 { list-style-type:lower-alpha;}#ol5 { list-style-type:upper-alpha;}#ul1 { list-style-type:disc;}#ul2 { list-style-type:circle;}#ul3 { list-style-type:square;}</style></head><body><p>有序列表</p><ol id="ol1"><li>HTML</li><li>CSS</li><li>Javascript</li></ol><ol id="ol2"><li>HTML</li><li>CSS</li><li>Javascript</li></ol><ol id="ol3"><li>HTML</li><li>CSS</li><li>Javascript</li></ol><ol id="ol4"><li>HTML</li><li>CSS</li><li>Javascript</li></ol><ol id="ol5"><li>HTML</li><li>CSS</li><li>Javascript</li></ol><p>无序列表</p><ul id="ul1"><li>HTML</li><li>CSS</li><li>Javascript</li></ul><ul id="ul2"><li>HTML</li><li>CSS</li><li>Javascript</li></ul><ul id="ul3"><li>HTML</li><li>CSS</li><li>Javascript</li></ul></body></html>
示例代码：
<html><head><title>列表项</title><style type="text/css">ol { list-style-type:none;}ul { list-style-type:none;}</style></head><body><p>有序列表</p><ol><li>HTML</li><li>CSS</li><li>Javascript</li></ol><p>无序列表</p><ul><li>HTML</li><li>CSS</li><li>Javascript</li></ul></body></html>
在实际开发中，我们经常需要用到这个小技巧，去除列表项默认符号。
自定义列表项符号list-style-image:
默认的列表符号比较丑，我们可以使用自定义的列表项美化网页的，在css中，可以使用list-style-image属性来自定义符号。
语法：
list-style-image:url("图像地址");
图像地址可以是相对地址，也可以是绝对地址。
示例代码：
<html><head><title>自定义列表</title><style type="text/css">ul {list-style-image: url("images/2.png");}</style></head><body><ul><li>HTML</li><li>CSS</li><li>Javascript</li></ul></body></html>
自定义列表项符号，实际上就是将原来的符号用一张图片替换了。这个在实际开发中用的不是太多。
1898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
