第5节列表与超链接.PDFVIP

传智播客——专注于Java 、.Net 和Php 、网页平面设计工程师的培训 第5章 列表与超链接 学习目标  掌握无序、有序及定义列表的使用，可以制作常见的网页列表 模块  掌握超链接标记的使用，能够使用超链接定义网页元素  掌握CSS 伪类，会使用CSS 伪类实现超链接特效 通过第4 章盒子模型的学习，已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构 成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定 的联系，就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS 控制列表和超链接的样式进 行详细讲解。 5.1 【案例11】精美电商悬浮框 案例描述 在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单的分类，这样即可以方便消 费者搜索商品，也可以使网页结构变得清晰美观。本节将运用无序列表制作一款精美的电商“悬浮框”， 其效果如图5-1 所示。 1 第5 章 列表与超链接 图5-1 “精美电商悬浮框”效果展示 知识引入 1、无序列表 无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系， 没有顺序级别之分。例如传智播客官网的导航栏结构清晰，各列表项之间（如“网页平面”与“java 培训”） 排序不分先后，这个导航栏就可以看做一个无序列表。定义无序列表的基本语法格式如下： ul li列表项1/li li列表项2/li li列表项3/li /ul 在上面的语法中，ul/ul标记用于定义无序列表，li/li标记嵌套在ul/ul标记中，用于描述 具体的列表项，每对ul/ul 中至少应包含一对li/li 。 值得一提的是，ul和li都拥有type 属性，用于指定列表项目符号。在无序列表中type 属性的常用 值有三个，它们呈现的效果不同，具体如表5-1 所示。 表5-1 无序列表的常用type 属性值 type 属性值 显示效果 disc （默认值） ● circle ○ 2 传智播客——专注于Java 、.Net 和Php 、网页平面设计工程师的培训 square ■ 了解了无序列表的基本语法和type 属性，下面来创建一个无序列表，如 【demo5-1】所示。 【demo5-1】 1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 2 /TR/xhtml1/DTD/xhtml1-transitional.dtd 3 html xmlns=/1999/xhtml 4 head 5 meta http-equiv=Content-Type content=text/html; charset=utf-8 / 6 title无序列表/title 7 /head 8 body 9 h2衣服/h2 10 ul type=circle !--对ul 应用type=circle-- 11 liT 恤/li 12 li连衣裙/li 13 li裤子/li 14 /ul 15 h2传智播客学科/h2 16 ul 17 li网页平面/li