网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第5章 为网页添加列表和超链接

第5章为网页添加列表和超链接《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》学习目标/Target熟悉列表标签，能够说出列表标签的分类熟悉CSS控制列表样式，能够说出CSS控制列表样式的属性掌握无序、有序及定义列表的使用，能够制作常见的网页模块掌握超链接标签的使用，能够使用超链接定义网页元素掌握CSS伪类的使用，能够使用CSS伪类实现超链接特效章节概述/Summary一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间跳转有一定的关联，就需要使用列表和超链接。本章将对列表、CSS控制列表样式、超链接标签和链接伪类控制超链接进行具体讲解。目录/Contents5.15.2列表标签CSS控制列表样式5.3超链接标签目录/Contents5.45.5链接伪类控制超链接阶段案例：制作新闻列表5.6动手实践：实现图文混排列表标签5.15.1.1无序列表<ul>什么是列表？5.1.1无序列表<ul>进一步了解列表说到列表大家并不陌生，在浏览网页时，随处可见。5.1.1无序列表<ul>HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表。5.1.1无序列表<ul>无序列表有序列表定义列表网页中最常用的列表，其各个列表项之间没有顺序级别之分，通常是并列的。有排列顺序的列表，其各个列表项按照一定的顺序排列。用于对术语或名词进行解释和描述。与无序列表和有序列表不同，定义列表的列表项前没有任何项目符号。5.1.1无序列表<ul>以导航栏为例，认识无序列表。导航栏结构清晰，各项（如“网页平面”“Java培训”）没有序号，这个导航栏就可以看做一个无序列表。无序列表有序列表定义列表5.1.1无序列表<ul>定义无序列表的基本语法格式如下：<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>......</ul><ul></ul>标签用于定义无序列表<li></li>标签用于描述具体的列表项每对<ul></ul>中至少应包含一对<li></li>。注意：无序列表有序列表定义列表5.1.1无序列表<ul>有序列表即为有排列顺序的列表。网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。以歌曲排行榜为例，认识有序列表。无序列表有序列表定义列表5.1.1无序列表<ul>定义有序列表的基本语法格式如下：<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>......</ol><ol></ol>标签用于定义有序列表<li></li>标签用于描述具体的列表项每对<ol></ol>中至少应包含一对<li></li>。注意：无序列表有序列表定义列表5.1.3定义列表<dl>认识定义列表定义列表常用于图文混排，其中<dt></dt>标签中插入图片，<dd></dd>标签中放入对图片解释说明的文字。<dt>标签<dd>标签无序列表有序列表定义列表5.1.3定义列表<dl>定义列表的基本语法格式如下：<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...</dl><dl></dl>标签用于指定定义列表<dt></dt>标签用于指定术语名词<dd></dd>标签用于对名词进行解释和描述无序列表有序列表定义列表CSS控制列表样式5.25.2CSS控制列表样式建议定义无序或有序列表时，可以通过标签的属性控制列表的项目符号，但是这种方式实现的效果并不理想，因此需要使用CSS中的列表样式属性。5.2CSS控制列表样式list-style-type属性list-style-image属性list-style-position属性list-style-type属性用于控制列表项显示符号的类型。list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。list-style-position属性用于控制列表项目符号的位置。5.2.1list-style-type属性list-style-type属性list-style-image属性list-style-position属性列表类型属性值显示效果无序列表（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不显示任何符号list-style-type的属性值及显示效果5.2.1list-style-type属性因为各个浏览器对list-style-type属性的解析不同。因此，在实际网页制作过程中不推荐使用

list-style-type属性。list-style-type属性list-style-image属性list-style-position属性5.2.2list-style-image属性基本格式ul{list-style-image:url(图片路径);}例如：<styletype="text/css">ul{list-style-image:url(images/1.png);}</style>list-style-image属性list-style-position属性list-style-type属性5.2.3list-style-position属性例如：list-style-position属性取值inside：列表项目符号位于列表文本以内。outside：列表项目符号位于列表文本以外。<styletype="text/css">.in{list-style-position:inside;}.out{list-style-psition:outside;}li{border:1pxsolid#CCC;}</style>list-style-image属性list-style-position属性list-style-type属性5.2.4list-style属性list-style-image属性2list-style-position属性3list-style-type属性1列表样式复合属性list-style复合属性list-style:列表项目符号

列表项目符号的位置

列表项目图像;使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。超链接标签5.35.3.1创建超链接一个网站通常由多个页面构成，进入网站时首先看到的是其首页。列表页内容页……首页通过超链接，实现页面之间的跳转5.3.1创建超链接如何创建超链接？在HTML中创建超链接非常简单，只需用<a></a>标签环绕需要被链接的对象即可。<ahref="跳转目标"target="目标窗口的弹出方式">

文本或图像</a>基本语法格式5.3.1创建超链接对超链接标签的常用属性解释如下：href用于指定链接目标的url地址，当为<a>标签应用href属性时，它就具有了超链接的功能。target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。5.3.1创建超链接多学一招：图像超链接出现边框解决办法创建图像超链接时，在某些浏览器中，图像会自动添加边框效果，影响页面的美观。去掉边框最直接的方法是将边框设置为0。<ahref="#"><img

src="图像URL"border="0"></a>5.3.2锚点链接如果网页内容较多，页面过长浏览网页时就需要不断地拖动滚动条，来查看所需要的内容效率较低不方便5.3.2锚点链接为了提高信息的检索速度HTML语言提供了一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。5.3.2锚点链接创建锚点链接分为两步1使用“<ahref="#id名">链接文本</a>”创建链接文本2使用相应的id名标注跳转目标的位置5.3.2锚点链接在CSS中通过链接伪类可以实现不同的链接状态定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。链接伪类控制超链接5.45.4链接伪类控制超链接定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在单击前、单击后和鼠标悬停时的样式不同。在CSS中，通过链接伪类可以实现不同的链接状态。5.4链接伪类控制超链接超链接标签<a>的伪类含义a:link{CSS样式规则;}超链接的默认样式a:visited{CSS样式规则;}超链接被访问过之后的样式a:hover{CSS样式规则;}鼠标经过、悬停时超链接的样式a:active{CSS样式规则;}鼠标单击不动时超链接的样式超链接标签<a>的伪类5.4链接伪类控制超链接<style>a:link,a:visited{ color:#FC0;

text-decoration:none;/*清除超链接默认的下画线*/}a:hover{ color:#0F0;

text-decoration:underline;/*鼠标悬停时出现下画线*/}a:active{color:#F00;}

</style>未访问和访问后鼠标悬停鼠标点击不放例如：5.4链接伪类控制超链接1.使用超链接的4种伪类时，对排列顺序是