1、第5章链接与列表1 1 考核知识点考核知识点超链接标签、链接伪类、元素类型的转换。2 2 练习目标练习目标掌握文本超链接的定义方法。掌握链接伪类的定义方法。复习元素类型的转换的相关知识。实验实验1 1 页码导航条页码导航条请做出以下效果：要求：（1）页码都由超链接标签定义。（2）标签样式效果如图所示，有高宽、有边框、有底色、没有超链接默认的下划线。（3）有hover效果,鼠标移到页码上字和边框都变红色。（4）当前页页码底色为红色，字为白色。3 3 实验内容及要求实验内容及要求实验实验1 1 页码导航条页码导航条结构分析：是在一个盒子中包多个超链接元素。样式分析：实现效果图5-7所示样式的思路如
2、下：（1）通过最外层的大盒子对页码导航条进行整体控制，需要对其设置宽度、高度以及背景色。（2）设置超链接标签样式，为其添加背景、文本样式、边框和填充，并将其转换为行内块元素，使其横向排列并能支持高宽设置。（3）通过链接伪类实现不同的链接状态。4 4 实验分析实验分析实验实验1 1 页码导航条页码导航条1 1 考核知识点考核知识点标签及属性的用法。2 2 练习目标练习目标 掌握标签定义及属性的设置。熟练热点区域的绘制及编辑的操作。实验实验2 2 图片热点超链接图片热点超链接请做出以下效果：要求：给定的图片“map.png”上有三个商品，只有在商品图片区域 上点击才能进到相应的商品详情页面。3 3
3、 实验内容及要求实验内容及要求实验实验2 2 图片热点超链接图片热点超链接结构分析：是在一个盒子中包多个超链接元素。样式分析：实现效果图5-7所示样式的思路如下：（1）通过最外层的大盒子对页码导航条进行整体控制，需要对其设置宽度、高度以及背景色。（2）设置超链接标签样式，为其添加背景、文本样式、边框和填充，并将其转换为行内块元素，使其横向排列并能支持高宽设置。（3）通过链接伪类实现不同的链接状态。4 4 实验分析实验分析实验实验2 2 图片热点超链接图片热点超链接1 1 考核知识点考核知识点无序列表。2 2 练习目标练习目标掌握无序列表的应用方法。复习盒子模型的相关知识。实验实验3 3 魅力彩
4、妆岁末魅力彩妆岁末盛惠盛惠请做出以下效果：要求：（1）用给定的图片做背景。（2）用无序列表来定义内容条目。（3）样式效果如图5-7所示。3 3 实验内容及要求实验内容及要求实验实验3 3 魅力彩妆岁末盛惠魅力彩妆岁末盛惠页面结构分析：如图5-7所示的彩妆优惠单，各优惠条目之间是并列关系，因此可以用无序列表进行定义。样式分析：实现效果图5-7所示样式的思路如下：（1）运用背景属性（background）为ul添加背景图，设置列表水平居中显示。（2）把li转换成行级块元素，通过填充来控制li的高宽，为li设置背景样式。4 4 实验分析实验分析实验实验3 3 魅力彩妆岁末盛惠魅力彩妆岁末盛惠1 1
5、考核知识点考核知识点自定义列表、图片创建超链接。2 2 练习目标练习目标掌握自定义列表的应用方法。掌握图片创建超链接的定义方法。实验实验4 4 自定义列表自定义列表请做出以下效果：要求：（1）用自定义列表定义页面结构。（2）样式效果如图所示。3 3 实验内容及要求实验内容及要求实验实验4 4 自定义列表自定义列表页面内容结构分析：图5-11所示的木耳商品，由图片和文字两部分构成，文字是对图片的描述和说明，因此可以通过定义列表实现该图文混排效果。其中标记中插入图片，标记中放入对图片解释说明的文字。样式分析：（1）为dl设置宽高、填充和边框样式。（2）为dd设置字体样式。4 4 实验分析实验分析实
6、验实验4 4 自定义列表自定义列表1 1 考核知识点考核知识点自定义列表、CSS Sprites（图片精灵）技术。2 2 练习目标练习目标掌握自定列表的应用方法。掌握列表项创建超链接的方法。熟练CSS Sprites（图片精灵）技术。实验实验5 5 服装鞋包菜单制作服装鞋包菜单制作请做出以下效果：要求：（1）用自定义列表定义页面结构。（2）用给定图片上的图标做列表项的项目符号。（3）鼠标经过时超链接的状态字变为红色。3 3 实验内容及要求实验内容及要求实验实验5 5 服装鞋包菜单制作服装鞋包菜单制作结构分析：页面结构可以化分为一个盒子中包括两部内容，上面部分是菜单名，下面部分是对菜单的菜单项列表。结构分析如图5-13所示，可以用自定义列表来定义页面结构，用标签定义菜单名，用标签定义菜单项。样式分析：（1）设置a的文本样式，通过链接伪类实现不同的链接状态。（2）通过dl对菜单栏进行整体控制，需要对其设置宽度、高度、填充以及背景色。（3）设置dt的高度和外边距。（4）设置dd的高度和边外边距。（5）列表项的项目符号用CSS Sprites（图片精灵）技术制作。4 4 实验分析实验分析实验实验5 5 服装鞋包菜单制作服装鞋包菜单制作
