HTML包含专门用于创建项目列表的元素,你可以创建普通列表、编号列表、符号列表以及描述列表,列表之中可以嵌套另一个列表。
所有的列表都由父元素和子元素构成,父元素用于指定列表的项目类型,子元素用于指定要创建的列表项目类型。有这样三种类型:
1 、有序列表——ol为父元素,li为子元素
2 、无序列表——ul为父元素,li为子元素
3 、描述列表——dl为父元素,dt和dd分别代表dl中的术语和描述
其中,无序列表是最常见的!
一 、创建有序列表和无序列表
如果列表项的顺序对于列表来说非常关键,这种时候有序列表就是恰当的选择。有序列表适于提供完成某一项任务的分步说明,或用于创建大型文档的大纲。
<ol> <li>……..</li> <li>……..</li> <li>……..</li> </ol> |
默认是阿拉伯数字创建带编号的有序列表。
无序列表正好相反,且应用更加普遍,如果列表项的顺序不太重要就使用无序列表。
<ul> <li>……..</li> <li>……..</li> <li>……..</li> </ul> |
默认情况下列表前面显示实心黑色圆点。
注意:列表前的样式都可以通过CSS修改,所以在使用标签的时候一定要严格遵循语义!
二 、选择标记
创建列表时,无论是有序列表还是无序列表,都可以选择出现在列表项目左侧标记的类型。
1 、选择标记
在样式表中,输入list-style-type:marker,这里的marker可以是:
disc——圆点
circle——圆圈
square——方块
decimal——数字
upper-alpha——大写字母
lower-alpha——小写字母
upper-roman——大写罗马字母
lower-roman——小写罗马字母
2 、显示无标记列表
在样式表中,输入list-style-type:none
3 、也可以在HTML中使用type属性,type可以是A,a,1,I,i等,但最好还是在CSS中定义样式。
三 、使用定制的标记
除此之外,你可以使用图像创建自己的标记。这里有一些技巧。
1 、清除列表的样式
2 、设置margin-left和padding-left属性
3 、设置列表项的背景图像
4 、输入padding-left,让文字为图像腾出位置
ol{ list-style: none; margin-left: 0; padding-left: 0; } li{ background: url(../imag/round_check.png) no-repeat 0 0; padding-left: 1.75em; } |
注意:
1 、相对背景图像的url是相对于样式表的
2 、默认标记在默认情况下位于列表项目的外面,而定制标记显示在列表项目的里面
四 、选择列表的起始编号
你可能希望列表的编号从默认值1以外的某个数字开始。
1 、设置整个列表编号方案的初始值
在ol标签中输入"start="n"",n表示项目的初始值
2 、修改有序列表中某项列表项目的编号
在目标li项目内输入"value="n"",n代表该列项目的值,至此接下来的项目都会受到影响。
五 、控制标记的位置
默认情况下,列表项前面的标记,是不在文本块里面的,不过可以更改,即通过修改list-style-position:inside,便可让标记与文本块融为一体。
六 、同时设置所有的样式属性
CSS为list-style提供了简写形式,将list-style-type、list-style-position、list-style-image放到一条属性中。
ul{ list-style:circle inside url(……png); } |
可以指定三个list-style属性,也可以指定其中的任意一个,指定多个属性的顺序任意,没有指定的,为默认,list-style-type的默认为disc,list-style-image的默认值为none,list-style-position的默认值为outside。
list-style最常用的是使用none来取消标记,这个属性也是继承的。
七 、设置嵌套列表的样式
可以在一个列表中嵌套另一个列表,对于有序列表和无序列表都有效!
这里要注意的是,嵌套的列表一定要在<li></li>标签里,通常情况下,有序列表正确的列表嵌套顺序为大写罗马数字、大写字母、阿拉伯数字和小写字母,此后交替使用阿拉伯数字和小写字母。无序列表的顺序为第一级用圆点符号,第二级用空心圆,第三级往后使用方块符号。
八 、创建描述列表
HTML提供了专门用于描述成组出现的名称(术语)及其值之间关联的列表类型,这种类型在HTML5中称为描述列表,用dl描述,dt表示名称,dd表示值,一个dt可以对应多个dd,多个dt也可以对应一个dd。
对于dt而言,有的时候会在这个标签里包裹<dfn>标签,指出该列表是定义术语的。
总结:这一章的内容不算复杂,平常也经常能用到,比如说导航栏,相比而言,HTML本身还算好写,难的是应用CSS,网上有很多这样的例子,可以实现很酷炫的效果,还得继续学习!