列表与超链接课件

让,IT,教学更简单，让,IT,学习更有效,让,IT,教学更简单，让,IT,学习更有效,第五章 列表与超链接,列表标记,超链接标记,列表样式的控制,CSS,伪类,5.1,列表标记,5.2,CSS,控制列表样式,5.3,超链接标记,5.4,链接伪类控制超链接,5.5,阶段案例,-,制作新闻列表,5.1.1,无序列表,ul,无序列表,的,各个列表项之间没有顺序级别之分，是并列的。,其,基本语法格式如下：,在上面的语法中，,标记用于定义无序列表，,标记嵌套在,标记中，用于描述具体的列表项，每对,中至少应包含一对,。,列表项,1,列表项,2,列表项,3,.,5.1,列表标记,5.1,列表标记,5.1.1,无序列表,ul,无序列表中,type,属性的常用值有三个，,它,们呈现的效果不同，具体如,下表,所示。,注意,:,不赞成使用无序列表的,type,属性，一般通过,CSS,样式属性替代。,与,之间相当于一个容器，可以容纳所有元素。但是,中只能嵌套,，直接在,标记中输入文字的做法是不被允许的,。,type,属性值,显示效果,disc,（默认值）,circle,square,5.1,列表标记,5.1.2,有序列表,ol,有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义,，,有序列表的基本语法格式如下：,在上面的语法中，,标记用于定义有序列表，,为具体的列表项，和无序列表类似，每对,中也至少应包含一对,。,列表项,1,列表项,2,列表项,3,.,5.1,列表标记,5.1.2,有序列表,ol,在有序列表中，除了,type,属性之外，还可以为,定义,start,属性、为,定义,value,属性，,它,们决定有序列表的项目符号，其取值和含义如,下表,所示。,注意,:,各浏览器对有序列表的,type,和,value,属性的解析不同。,不赞成使用,的,type,、,start,和,value,属性,，,可,通过,CSS,样式替代。,属性,属性值,描述,type,1,（默认）,项目符号显示为数字,1 2 3,a,或,A,项目符号显示为英文字母,a b c d,或,A B C,i,或,I,项目符号显示为罗马数字,i ii iii,或,I II III,start,数字,规定项目符号的起始值,value,数字,规定项目符号的数字,5.1,列表标记,5.1.3,定义列表,dl,定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：,名词,1,名词,1,解释,1,名词,1,解释,2,.,名词,2,名词,2,解释,1,名词,2,解释,2,.,5.1,列表标记,5.1.3,定义列表,dl,在上面的语法中，,标记用于指定定义列表，,和,并列嵌套于,中，其中，,标记用于指定术语名词，,标记用于对名词进行解释和描述。一对,可以对应多对,，即可以对一个名词进行多项解释。,5.1,列表标记,5.1.4,列表的嵌套应用,在使用列表时，列表项中可能包含若干子列表项。要想在列表项中定义子列表项就需要将列表进行嵌套,。,5.2 CSS,控制列表样式,5.2.1 list-style-type,属性,list-style-type,属性用于控制无序和有序列表的项目符号，其取值有多种，如,下表,所示。,列表类型,属性值,显示效果,无序列表（,ul,）,disc,circle,square,有序列表（,ol,）,decimal,阿拉伯数字,1,、,2,、,3.,upper-alpha,大写英文字母,A,、,B,、,C.,lower-alpha,小写英文字母,a,、,b,、,c.,upper-roman,大写罗马数字,I,、,II,、,III.,lower-roman,小写罗马数字,i,、,ii,、,iii.,、,公共属性,none,不显示任何符号,5.2 CSS,控制列表样式,5.2.1 list-style-type,属性,注意,:,在实际网页制作过程,中,，,各个,浏览器对,list-style-type,属性的解析不同。因此,，不,推荐使用,list-style-type,属性。,5.2 CSS,控制列表样式,5.2.2 list-style-image,属性,list-style-image,属性,的,取值为图像的,url,（地址）。使用,list-style-image,属性可以为各个列表项设置项目图像，使列表的样式更加美观。,5.2 CSS,控制列表样式,5.2.3 list-style-position,属性,list-style-position,属性用于控制列表项目符号的位置，其取值,如下所示,：,inside,：列表项目符号位于列表文本以内。,outside,：列表项目符号位于列表文本以外（默认值）。,5.2 CSS,控制列表样式,5.2.4 list-style,属性,列表样式也是一个,复合属性,，可以将列表相关的样式都综合定义在一个复合属性,list-style,中。,其,语法格式如下：,使用复合属性,list-style,时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。,值得一提的是，在实际网页制作过程中，为了更高效地控制列表项目符号，通常将,list-style,的属性值定义为,none,，然后通过为,设置背景图像的方式实现不同的列表项目符号。,list-style:,列表项目符号 列表项目符号的位置 列表项目图像,;,5.3,超链接标记,5.3.1,创建超链接,在,HTML,中创建超链接非常简单，只需用,标记环绕需要被链接的对象即可，其基本语法格式如下：,在上面的语法中，,标记是一个行内标记，用于定义超链接，,href,和,target,为其常用属性，下面对,它,们进行具体地解释,。,文本或图像,5.3,超链接标记,5.3.1,创建超链接,href,：用于指定链接目标的,url,地址，当为,标记应用,href,属性时,，,它,就,具有了超链接的功能,。,target,：用于指定,链接页面的打开方式，其取值有,_self,和,_blank,两种，其中,_self,为默认,值，,_blank,为在新窗口中,打开,方式,。,5.3,超链接标记,5.3.1,创建超链接,注意,:,暂时没有确定链接目标时，通常将,标记的,href,属性值定义为,“#”(,即,href=#),，表示该链接暂时为一个空链接,。,不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。,脚下留心,创建图像超链接时，在某些浏览,器,中，图像会添加边框效果，影响页面的美观。,为了不影响页面的美观，通常需要去掉图像的边框效果，使图像正常显示。去掉链接图像的边框很简单，只需将图像的边框定义为,0,即可，,代码,如下,所示,：,5.3,超链接标记,5.3.2,锚点链接,通过创建锚点链接，用户能够快速定位到目标内容。,创建锚点链接分为两步：,使用“,链接文本,”创建链接,文本,。,使用相应的,id,名标注跳转目标的,位置,。,5.4,链接伪类控制,超链接,在,CSS,中，通过链接伪类可以实现不同的链接状态,。,所谓伪类并不是真正意义上的类，,它,的名称是由系统定义的，通常由标记名、类名或,id,名加“：”构成。超链接标记,的伪类有,4,种，具体如,下表,所示。,超链接标记,的伪类,含义,a:link CSS,样式规则,;,未访问时超链接的状态,a:visited CSS,样式规则,;,访问后超链接的状态,a:hover CSS,样式规则,;,鼠标经过、悬停时超链接的状态,a:active CSS,样式规则,;,鼠标点击不动时超链接的状态,5.4,链接伪类控制,超链接,注意,:,同时使用链接的,4,种伪类时，通常按照,a:link,、,a:visited,、,a:hover,和,a:active,的顺序书写，否则定义的样式可能不起作用,。,除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。,5.5,阶段案例,效果如,下,图所示。,本章介绍了,HTML,中两个重要的元素,列表与超链接,，主要包括列表,相关标记,、,超链接标记,、以及,如何使用,CSS,控制列表与超链接的样式,。在本章的最后，通过无序列表,ul,进行布局，然后使用,CSS,控制列表与超链接的样式，,制作出了一个常见的新闻列表,。,通过本章的学习，读者应该能够,熟练地运用列表与超链接组织页面元素,。,