DIV+CSS基础DIV+CSS补充知识:CSS列表样式的个性定义

DIV+CSS补充知识:CSS列表样式的个性定义

我们在网页中经常使用有序列表和无序列表,有序列表的默认表现形式为每个列表项前面有数字序号,而无序列表的默认表现形式是每个列表项前面有一个小圆点,我们可以使用CSS改变列表的样式。

1. 列表标志类型 list-style-type属性

列表项前面的小圆点可以有以下样式可以定义:

list-style-type:none 去掉列表前的小圆点

list-style-type:disc 默认标记是实心圆点

list-style-type:circle 标记是空心圆点

list-style-type:square 标记是实心方块

list-style-type:decimal 标记是数字

list-style-type:decimal-leading-zero 0开头的数字标记(01, 02, 03 等)

list-style-type:lower-roman 小写罗马数字(I, II, IIi, iv, v 等)

list-style-type:upper-roman 大写罗马数字(I, II, III, IV, V 等)

list-style-type:lower-alpha 小写英文字母(a, b, c, d, e 等)

list-style-type:upper-alpha 大写英文字母(a, b, c, d, E 等)

list-style-type:lower-greek 小写希腊字母(alpha, beta, gamma 等)

我们来试试效果:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>测试网页标题</title><style type="text/css">.ul1 {list-style-type:circle;}.ul2 {list-style-type:square;}.ul3 {list-style-type:decimal-leading-zero;}.ul4 {list-style-type:upper-alpha;}</style></head><body><ul class="ul1"><li>列表项目内容</li><li>列表项目内容</li><li>列表项目内容</li><li>列表项目内容</li></ul><ul class="ul2"><li>列表项目内容</li><li>列表项目内容</li><li>列表项目内容</li><li>列表项目内容</li></ul><ul class="ul3"><li>列表项目内容</li><li>列表项目内容</li><li>列表项目内容</li><li>列表项目内容</li></ul><ul class="ul4"><li>列表项目内容</li><li>列表项目内容</li><li>列表项目内容</li><li>列表项目内容</li></ul></body></html>

浏览这个网页,我们可以看到每个列表的列表项前方的标志被改变了。

列表类型.png

通过这个属性,无序列表也可以定义成带序号的“有序列表”,当然有序列表也可以定义成带小圆点的“无序列表”,但是CSS只可以定义样式,而不能定义语义,因此即使我们给无序列表定义了数字序号,它仍然是无序列表。

2. 列表项图片 list-style-image属性

除了上面这些列表项标志以外,还可以定义自定义图片作为列表前面的小标志:

ul li {list-style-image: url(1.gif);}

例如这里就是将列表图片定义为一个gif小图片,当然,通过背景属性background-image也是可以定义列表项图片的,它比list-style-image属性更常用。

3. 定义列表项的位置 list-style-position属性

list-style-position:inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐;

list-style-position:outside 默认值,保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.sz-kmd.com.cn/div_css/17.html

DIV+CSS基础DIV+CSS技巧CSS3基础建站经验技巧实用资源下载