HTML+CSS学习笔记(十三)

岁酱吖の 提交于 2020-01-03 14:47:43

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,网上有很多这样的例子,可以实现很酷炫的效果,还得继续学习!

 

 

 

 

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!