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