传智播客——专注于

Java、.
Net和Php、网页平面设计工程师的培训1第5章列表与超链接学习目标掌握无序、有序及定义列表的使用,可以制作常见的网页列表模块掌握超链接标记的使用,能够使用超链接定义网页元素掌握CSS伪类,会使用CSS伪类实现超链接特效通过第4章盒子模型的学习,已经很容易对网页做一个简单的结构划分.
但是一个网站由多个网页构成,每个网页上都有大量的信息,要想使网页中的信息排列有序,条理清晰,并且网页与网页之间有一定的联系,就需要使用列表和超链接.
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解.
5.
1【案例11】精美电商悬浮框案例描述在制作电商网站时,通常需要使用一些精美的悬浮框对商品信息进行简单的分类,这样即可以方便消费者搜索商品,也可以使网页结构变得清晰美观.
本节将运用无序列表制作一款精美的电商"悬浮框",其效果如图5-1所示.
第5章列表与超链接2图5-1"精美电商悬浮框"效果展示知识引入1、无序列表无序列表是网页中最常用的列表,之所以称为"无序列表",是因为其各个列表项之间为并列关系,没有顺序级别之分.
例如传智播客官网的导航栏结构清晰,各列表项之间(如"网页平面"与"java培训")排序不分先后,这个导航栏就可以看做一个无序列表.
定义无序列表的基本语法格式如下:列表项1列表项2列表项3.
.
.
.
.
.
在上面的语法中,标记用于定义无序列表,标记嵌套在标记中,用于描述具体的列表项,每对中至少应包含一对.
值得一提的是,和都拥有type属性,用于指定列表项目符号.
在无序列表中type属性的常用值有三个,它们呈现的效果不同,具体如表5-1所示.
表5-1无序列表的常用type属性值type属性值显示效果disc(默认值)circle传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训3square了解了无序列表的基本语法和type属性,下面来创建一个无序列表,如【demo5-1】所示.
【demo5-1】13456无序列表789衣服1011T恤12连衣裙13裤子1415传智播客学科1617网页平面18Java19PHP202122在【demo5-1】中,创建了两个无序列表,并通过type属性为它们定义列表项目符号.
在第一个无序列表中,对标记应用type属性,在第二个列表中对其子列表项应用type属性.
运行【demo5-1】,效果如图5-2所示.
图5-2无序列表效果展示从图5-2可以看出,不定义type属性时,列表项目符号显示为默认的"",为或定义type属性时,列表项目符号则按定义的样式显示.
第5章列表与超链接4注意:1、不赞成使用无序列表的type属性,一般通过CSS样式属性替代.
2、与之间相当于一个容器,可以容纳所有的元素.
但是中只能嵌套,直接在标记中输入文字的做法是不被允许的.
2、有序列表有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列,例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义.
定义有序列表的基本语法格式如下:列表项1列表项2列表项3.
.
.
.
.
.
在上面的语法中,标记用于定义有序列表,为具体的列表项,和无序列表类似,每对中也至少应包含一对.

在有序列表中,除了type属性之外,还可以为定义start属性、为定义value属性,它们决定有序列表的项目符号,其取值和含义如表5-2所示.
表5-2有序列表相关的属性属性属性值描述type1(默认)项目符号显示为数字123…a或A项目符号显示为英文字母abcd…或ABC…i或I项目符号显示为罗马数字iiiiii…或IIIIII…start数字规定项目符号的起始值value数字规定项目符号的数字案例实现1、结构分析在图5-1所示的电商"悬浮框"中,商品分类清晰,各条商品并列排列、且排序不分先后,因此可以通过无序列表进行定义.
效果图5-1对应的结构如图5-3所示.
传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训5图5-3结构分析2、样式分析实现效果图5-1所示样式的思路如下:(1)运用背景属性(background)为ul添加大的背景图.
(2)为li添加宽高和边框样式,并设置最后一个li为无边框样式.
3、制作页面结构根据上面的分析,使用相应的HTML标记来搭建网页结构,如【example11】所示.
【example11】13456精美电商悬浮框7891011服装鞋帽12数码家电13运动户外14孕婴用品第5章列表与超链接615厨卫家居161718运行【example11】,效果如图5-4所示.
图5-4HTML结构页面效果图4、定义CSS样式搭建完页面的结构后,接下来使用CSS对页面的样式进行修饰.
本小节采用从整体到局部的方式实现图5-1所示的效果,具体如下:(1).
定义基础样式/*全局控制*/body{font-size:16px;font-family:"微软雅黑";color:#222;}/*重置浏览器的默认样式*/body,ul,li{padding:0;margin:0;list-style:none;}(2).
为ul添加背景ul{width:171px;height:299px;background:url(images/bg.
jpg)no-repeat;padding-top:190px;color:#fff;}在上面的代码中,先设置无序列表ul的宽、高,再通过background属性为其添加背景图像.
(3).
为li设置宽高和边框样式li{width:80px;height:40px;text-align:center;line-height:40px;border-bottom:1pxdotted#fff;margin-left:45px;}传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训7(4).
去掉最后一个li的边框.
no_line{border:none;}/*设置类名为no_line的li无边框*/至此,完成图5-1所示电商悬浮框的CSS样式部分.
刷新【example11】所在的页面,效果如图5-5所示.
图5-5CSS控制电商悬浮框效果5.
2【案例12】二维码名片案例描述传统的名片,往往需要手动把上面的信息存进手机,这样的录入方式繁琐且容易出错.
二维码名片的出现,简化了繁琐的信息录入方式,轻轻一扫,就可读取内部包涵的文字和图片信息,极大地提高了信息的存取速度.
本节将运用定义列表制作一款时尚潮流的"二维码名片",其效果如图5-6所示.
第5章列表与超链接8图5-6"二维码名片"效果展示知识引入1、定义列表定义列表常用于对术语或名词进行解释和描述,与无序和有序列表不同,定义列表的列表项前没有任何项目符号.
其基本语法如下:名词1名词1解释1名词1解释2.
.
.
名词2名词2解释1名词2解释2.
.
.
在上面的语法中,标记用于指定定义列表,和并列嵌套于中,其中,标记用于指定术语名词,标记用于对名词进行解释和描述.
一对可以对应多对,即可以对一个名词进行多项解释.
了解了定义列表的基本语法,下面对其用法和效果做具体演示,如【demo5-2】所示.

【demo5-2】13456定义列表传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训978910计算机11用于大型运算的机器12可以上网冲浪13工作效率非常高141516在【demo5-2】中,定义了一个定义列表,其中标记内为术语名词"计算机",其后紧跟着3对标记,用于对标记中的名词进行解释和描述.
运行【demo5-2】,效果如图5-7所示.
图5-7定义列表效果展示从图5-7容易看出,相对于标记中的术语或名词,标记中解释和描述性的内容会产生一定的缩进效果.
2、定义列表实现图文混排在网页设计中,定义列表常用于实现图文混排效果,其中标记中插入图片,标记中放入对图片解释说明的文字.
如图5-8所示的"讲师简介"模块就可以通过定义列表来实现.
图5-8图文混排结构图第5章列表与超链接103、列表嵌套在网上购物商城中浏览商品时,经常会看到某一类商品被分为若干小类,这些小类通常还包含若干的子类,同样,在使用列表时,列表项中也有可能包含若干子列表项.
要想在列表项中定义子列表项就需要将列表进行嵌套,下面对列表嵌套的方法做具体演示,如【demo5-3】所示.

【demo5-3】13456列表嵌套789饮品1011咖啡1213拿铁14摩卡151617茶1819碧螺春20龙井2122232425在【demo5-3】中,首先定义了一个包含两个列表项的无序列表,然后在第一个列表项中嵌套一个有序列表,在第二个列表项中嵌套一个无序列表,方法为在中定义有序或无序列表.

运行【demo5-3】,效果如图5-9所示.
传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训11图5-9列表嵌套效果展示在图5-9中,咖啡和茶两种饮品又进行了第二次分类,"咖啡"分类为"拿铁"和"摩卡","茶"分类为"龙井"和"碧螺春".
案例实现1、结构分析图5-6所示的"二维码名片"由图片和文字两部分构成,文字部分是对二维码图片的描述和说明.
因此可以通过定义列表实现该图文混排效果,其中标记中插入图片,标记中放入对图片解释说明的文字.
效果图5-6对应的结构如图5-10所示.
图5-10结构分析2、样式分析实现效果图5-6所示样式的思路如下:第5章列表与超链接12(1)为dl定义宽、高和边框样式.
(2)为dt定义宽、高样式,并运用背景属性添加二维码图片.
(3)为dd定义宽、高样式,并单独控制dd中特殊显示的文本.
3、制作页面结构根据上面的分析,使用相应的HTML标记来搭建网页结构,如【example12】所示.
【example12】13456设计师名片/title>789101112李刚 传智播客13晋级:网页设计师14案例:41个15经验:4年161718在上面的代码中,两对span标记分别用于控制特殊显示的文本"李刚"和"传智播客".
运行【example12】,效果如图5-11所示.
图5-11HTML结构页面效果图4、定义CSS样式搭建完页面的结构后,接下来使用CSS对页面的样式进行修饰.
本小节采用从整体到局部的方式实现图5-6所示的效果,具体如下:(1).
定义基础样式/*全局控制*/body{font-size:14px;}传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训13/*清除浏览器的默认样式*/body,dl,dt,dd{padding:0;margin:0;border:0;}(2).
为dl设置宽高和边框样式dl{width:170px;height:270px;border:10pxsolid#f1e9e9;padding:10px;margin:10px;}上面的代码用于为dl设置宽高和边框样式,为了使边框和内容之间、dl与浏览器边界之间有一定的留白,设置了内边距padding及外边距margin样式.
(3).
加入二维码图片dt{width:170px;height:162px;background:url(images/img.
png)no-repeat-17pxcenter;margin-bottom:5px;}在上面的代码中,通过为dt标记设置背景图像来插入二维码,并且为了使二维码图像和下面的文本拉开一定的距离,应用了margin-bottom样式.
(4).
设置dd中的文本样式dd{width:170px;height:26px;line-height:26px;color:#999;padding-left:5px;}上面的代码用于控制dd标记中文本的宽、高、行高及颜色,为了使文本左侧有一定的留白,应用了padding-left样式.
(5).
控制特殊显示的文本.
poo1{font-weight:bold;font-size:16px;}.
poo2{font-size:12px;}上面的代码用于控制特殊显示的文本"李刚"与"传智播客".
至此,完成图5-6所示二维码名片的CSS样式部分.
刷新【example12】所在的页面,效果如图5-12所示.
第5章列表与超链接14图5-12二维码名片CSS样式效果5.
3【案例13】电商团购悬浮框案例描述.
单调的列表项目符号往往并不能满足网页制作的需求,这时就需要使用CSS中的背景图像属性,通过图像的url(路径)为各列表项设置更丰富的图像,使列表的样式更加美观.
本节将通过背景图像定义列表项目符号的方法制作一款电商"团购悬浮框",其效果如图5-13所示.
图5-13电商团购悬浮框传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训15知识引入1、list-style复合属性同盒子模型的边框等属性一样,CSS中的列表样式也是一个复合属性,可以将列表相关的样式都综合定义在一个复合属性list-style中.
使用list-style属性综合设置列表样式的语法格式如下:list-style:列表项目符号列表项目符号的位置列表项目图像;使用复合属性list-style时,通常按上面语法格式中的顺序书写,各个样式之间以空格隔开,不需要的样式可以省略.
但是在实际网页制作过程中,为了更高效地控制列表项目符号,通常将list-style的属性值定义为none,然后通过为设置背景图像的方式实现不同的列表项目符号.
2、背景图像定义列表项目符号由于列表样式对列表项目图像的控制能力不强,所以实际工作中常通过为设置背景图像的方式实现列表项目图像.
下面对背景属性定义列表项目符号的方法做具体演示,如【demo5-4】所示.

【demo5-4】13456背景属性定义列表项目符号78li{9list-style:none;/*清除列表的默认样式*/10height:26px;11line-height:26px;12background:url(images/book.
png)no-repeatleftcenter;/*为li设置背景图像*/13padding-left:25px;14}15161718传智播客学科1920网页平面21JAVA22php23.
net242526在【demo5-4】中,定义了一个无序列表,其中第9行代码通过"list-style:none;"清除列表的默认显示样式,第12行代码通过为设置背景图像的方式来定义列表项目符号.
第5章列表与超链接16运行【demo5-4】,效果如图5-14所示.
图5-14背景图定义列表项目符号在图5-14中,每个列表项前都添加了列表项目图像,如果需要调整列表项目图像只需更改的背景属性即可.
案例实现1、结构分析图5-15所示的电商"团购悬浮框"由团购时间、团购种类和返回顶部几部分并列构成,可以通过无序列表来定义.
效果图5-13对应的结构如图5-15所示.
图5-15结构分析2、样式分析实现效果图5-13所示样式的思路如下:(1)为ul设置宽、高和边框样式.
传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训17(2)为li设置宽、高样式,并通过背景属性定义列表项目符号.
3、制作页面结构根据上面的分析,使用相应的HTML标记来搭建网页结构,如【example13】所示.
【example13】13456电商团购悬浮框78910117月30日0:00开团12新品团13尝鲜团14秒杀团15清仓团16返回顶部171819运行【example13】,效果如图5-16所示.
图5-16HTML结构页面效果图4、定义CSS样式搭建完页面的结构后,接下来使用CSS对页面的样式进行修饰.
本节采用从整体到局部的方式实现图5-13所示的效果,具体如下:(1).
定义基础样式/*重置浏览器的默认样式*/第5章列表与超链接18body,ul,li{padding:0;margin:0;list-style:none;}/*全局控制*/body{font-size:18px;font-family:"微软雅黑";}(2).
为ul设置宽、高和边框样式ul{width:200px;height:270px;margin:20px;border:3pxsolid#613e72;padding:10px;}上面的代码用于为ul设置宽、高和边框样式,为了使边框和内容之间、ul与浏览器边界之间有一定的留白,还设置了内边距padding及外边距margin样式.
(3).
整体控制列表项li团购时间、团购种类与返回顶部三部分有一些相同的样式,如宽、高、行高、内边距和外边距,但是列表项目图像与文本颜色不同.
这里先以团购时间的样式为标准,来整体控制列表项li的样式.
CSS代码如下:li{width:142px;height:40px;line-height:40px;background:url(images/clock.
png)no-repeatleftcenter;padding-left:40px;margin:0auto5px;color:#613e72;}这时,刷新【example13】所在的页面,效果如图5-17所示.
图5-17整体控制列表项传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训19(4).
单独控制团购种类部分团购种类部分的文本颜色和列表项目图像与团购时间不同,且其背景颜色为紫色,需要单独进行控制.
CSS代码如下:.
item{background:#613e72url(images/icon.
png)no-repeat5pxcenter;color:#fff;}(5).
单独控制返回顶部部分返回顶部部分的列表项目图像与团购时间不同,需要单独为其定义背景图像.
CSS代码如下:.
back{background:url(images/back.
png)no-repeatleftcenter;}至此,完成图5-13所示电商团购悬浮框的CSS样式部分.
刷新【example13】所在的页面,效果如图5-18所示.
图5-18团购悬浮框CSS样式效果5.
4【案例14】唱吧导航栏案例描述浏览网站时,通过导航栏可以让访问者迅速找到所需要的资源区域,就像出门旅行,旅客通过地图的引导能够轻松到达目的地.
导航栏就相当于一个网站的地图,访客可以通过导航纵观整个网站.
本节将运用列表和超链接的相关知识制作一款"唱吧导航栏",其效果如图5-19所示.
当鼠标移上每个歌曲分类时,其背景颜色和背景图像都发生变化,如图5-20所示.
第5章列表与超链接20图5-19唱吧导航栏默认效果图5-20鼠标移上歌曲分类时知识引入1、超链接标记一个网站通常由多个页面构成,进入网站时首先看到的是其首页,如果想从首页跳转到其子页面,就需要在首页相应的位置添加超链接.
在HTML中创建超链接非常简单,只需用标记环绕需要被链接的对象即可.
创建超链接的基本语法格式如下:文本或图像在上面的语法中,标记是一个行内标记,用于定义超链接,href和target为其常用属性,下面对它们进行具体地解释.
href:用于指定链接目标的url地址,当为标记应用href属性时,它就具有了超链接的功能.
target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,意为在原窗口中打开,_blank为在新窗口中打开.
了解了创建超链接的基本语法和超链接标记的常用属性,接下来带领大家创建一个带有超链接功能的简单页面,如【demo5-5】所示.
【demo5-5】13456创建超链接789传智播客target="_self"原窗口打开10百度target="_blank"新窗口打开1112传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训21在【demo5-5】中,创建了两个超链接,通过href属性将它们的链接目标分别指定为"传智播客官网"和"百度",同时,通过target属性定义第一个链接页面在原窗口打开,第二个链接页面在新窗口打开.

运行【demo5-5】,效果如图5-21所示.
图5-21带有超链接的页面在图5-21中,被超链接标记环绕的文本"传智播客"和"百度"颜色特殊且带有下划线效果,这是因为超链接标记本身有默认的显示样式.
当鼠标移上链接文本时,光标变为""的形状,同时,页面的左下方会显示链接页面的地址.
当点击链接文本"传智播客"和"百度"时,分别会在原窗口和新窗口中打开链接页面,如图5-22和5-23所示.
图5-22链接页面在原窗口打开图5-23链接页面在新窗口打开注意:1、暂时没有确定链接目标时,通常将标记的href属性值定义为"#"(即href="#"),表示该链接暂时为一个空链接.
2、不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接.
2、清除超链接图像的边框创建图像超链接时,在某些浏览器中,图像会自动添加边框效果,如图5-24所示.
图5-24IE中图像超链接的效果第5章列表与超链接22这时为了不影响页面的美观,通常需要清除超链接图像的边框,使图像正常显示.
去掉链接图像的边框很简单,只需将图像的边框定义为0即可,具体示例代码如下:这时保存HTML文件,刷新图5-24所示的页面,效果如图5-25所示,链接图像的边框消失了.
图5-25清除链接图像边框3、链接伪类在CSS中,通过链接伪类可以实现不同的链接状态,使得超链接在点击前、点击后和鼠标悬停时的样式不同.
所谓伪类并不是真正意义上的类,它的名称是由系统定义的,通常由标记名、类名或id名加":"构成.
超链接标记的伪类有4种,具体如表5-3所示.
表5-3超链接标记的伪类超链接标记的伪类含义a:link{CSS样式规则;}未访问时超链接的状态a:visited{CSS样式规则;}访问后超链接的状态a:hover{CSS样式规则;}鼠标经过、悬停时超链接的状态a:active{CSS样式规则;}鼠标点击不动时超链接的状态表5-3中列出了超链接标记的4种伪类,为了使初学者更好地理解和应用链接伪类,接下来使用链接伪类来制作一个网页导航,如【demo5-6】所示.
【demo5-6】13456链接伪类78a:link,a:visited{/*未访问和访问后*/9color:#FC0;10text-decoration:none;/*清除超链接默认的下划线*/11margin-right:20px;12}13a:hover{/*鼠标悬停*/14color:#0F0;15text-decoration:underline;/*鼠标悬停时出现下划线*/16}传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训2317a:active{color:#F00;}/*鼠标点击不动*/18192021公司首页22公司简介23产品介绍24联系我们2526在【demo5-6】中,通过链接伪类定义超链接不同状态的样式,需要注意的是第10行代码用于清除超链接默认的下划线,第15行代码用于在鼠标悬停时为超链接添加下划线.
运行【demo5-6】,效果如图5-26所示.
图5-26导航效果在图5-26中,超链接按设置的默认样式显示,文本颜色为橙色、无下划线.
当鼠标移上链接文本时,文本颜色变为绿色且添加下划线效果,如图5-27所示.
当鼠标点击链接文本不动时,文本颜色变为红色且添加默认的下划线,如图5-28所示.
图5-27鼠标悬停时的链接样式图5-28鼠标点击不动时的链接样式值得一提的是,在实际工作中,通常只需要使用a:link、a:visited和a:hover定义未访问、访问后和鼠标悬停时的链接样式.
并且常常对a:link和a:visited应用相同的样式,使未访问和访问后的链接样式保持一致.
注意:1、同时使用链接的4种伪类时,通常按照a:link、a:visited、a:hover和a:active的顺序书写,否则定义的样式可能不起作用.
2、除了文本样式之外,链接伪类还常常用于控制超链接的背景、边框等样式.

4、锚点链接浏览网站时,为了提高信息的检索速度,常需要用到HTML语言中一种特殊的链接——锚点链接,通过创建锚点链接,用户能够快速定位到目标内容.
下面对创建锚点链接的方法做具体演示,如【demo5-7】所示.
第5章列表与超链接24【demo5-7】锚点链接课程介绍:平面广告设计网页设计与制作Flash互动广告动画设计用户界面(UI)设计Javascript与JQuery网页特效平面广告设计课程涵盖Photoshop图像处理、Illustrator图形设计、平面广告创意设计、字体设计与标志设计.
网页设计与制作课程涵盖DIV+CSS实现web标准布局、Dreamweaver快速网站建设、网页版式构图与设计技巧、网页配色理论与技巧.
Flash互动广告动画设计课程涵盖Flash动画基础、Flash高级动画、Flash互动广告设计、Flash商业网站设计.
用户界面(UI)设计课程涵盖实用美术基础、手绘基础造型、图标设计与实战演练、界面设计与实战演练.

Javascript与JQuery网页特效课程涵盖Javascript编程基础、Javascript网页特效制作、JQuery编程基础、JQuery网页特效制作.
在【demo5-7】中,首先使用"链接文本"创建链接文本,其中href="#id名"用于指定链接目标的id名称,如11-15行代码所示,然后使用相应的id名标注跳转目标位置.
运行【demo5-7】,效果如图5-29所示.
传智播客——专注于Java、.
Net和Php、网页平面设计工程师的培训25图5-29创建锚点链接图5-28所示即为一个较长的网页页面,当鼠标点击"课程介绍"下的链接时,页面会自动定位到相应的内容介绍部分.
例如点击"Flash互动广告动画设计"时,页面效果如图5-30所示.
图5-30页面定位到相应的位置总结【demo5-7】可以得出,创建锚点链接分为两步:1、使用"链接文本"创建链接文本2、使用相应的id名标注跳转目标的位置案例实现1、结构分析图5-19所示的导航栏可以看做是一个大的盒子,用标记进行定义.
大盒子的上面为标题和播放按钮,下面为歌曲分类,其中标题和播放按钮可以通过和标记进行定义,歌曲分类部分用无序列表进行定义.
对于歌曲分类中的链接可通过超链接标记进行定义.
效果图5-19对应的结构如图5-31所示.
第5章列表与超链接26图5-31结构分析2、样式分析实现效果图5-19所示样式的思路如下:(1)通过最外层的大盒子对导航栏进行整体控制,需要对其设置宽度、高度、内边距、边框及背景色等.
(2)设置标题和播放按钮的样式,主要控制其文本大小、颜色、背景图像等.