《网页设计与制作》课件-第六章 应用CSS设置链接和导航菜单

第六章应用CSS设置链接和导航菜单作业与回顾如何让HTML元素自动居中?如何让无序列表横向排列?使用float属性后,有一件事不能忘记,是什么?作业点评点评作业的提交情况和共性问题预习检查如何将链接转换为块级元素?导航菜单使用的是什么标签实现的？应用课程目标

超链接的应用

设置导航菜单本章任务超链接的伪类样式超链接：

重点：:link、:visited是a标签独有的伪类，:hover和:active是所有标签都能设置。 4种状态的顺序一定不能颠倒，否则有些不会生效。伪类标签标签类型常用属性属性值a:link未访问的链接color：添加颜色text-decoration：添加文本修饰颜色属性值为颜色的英文单词或十六位颜色代码a:visited已访问链接none:默认显示，没有任何样式a:hover鼠标移动到链接上(悬浮)underline：定义文本下的一条线line-through:定义文本中间的一条线a:active鼠标激活链接(点击)超链接伪类的应用超链接的4种样式将超链接转换为块级元素用css制作按钮首字下沉小练习实现如下图的效果：将链接转换为块级元素并制作按钮display:block;(内联样式转换为块级元素)超链接伪类的应用超链接的4种样式将超链接转换为块级元素用css制作按钮首字下沉常用属性描述常用属性值display将链接转换为块级元素blockwidth定义块级元素的宽度以像素值或百分比进行设置height定义块级元素的高度以像素值或百分比进行设置line-height定义块级元素的行高normal;实数；长度；百分比；重点：不能使用负值text-align定义链接上的文本对齐方式left;right;center;background添加背景颜色或图片颜色的英文单词或十六位颜色编码添加边框样式添加伪类样式border:1pxsolidblack:hover小练习使用a标签实现按钮效果：hover后练习首字下沉新增伪元素：::first-letter只通过为首字设置样式实现首字下沉超链接伪类的应用超链接的4种样式将超链接转换为块级元素用css制作按钮首字下沉设置导航菜单设置导航菜单横向列表菜单用图片美化的横向导航CSSSprites技术二级菜单列表ulolli课堂练习实现如下图的效果：横向列表菜单课堂练习实现如下图的效果：二级菜单列表通过二级菜单把一级菜单分成几个部分分别导航二级菜单列表的实现课堂练习CSSSprites技术

CSSSprites:又称为

CSS精灵或者CSS雪碧

它把网页中的一些背景图片整合到一张图片文件中，再利用CSS背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。/

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。使用精灵图课堂练习使用精灵图做出以下效果单元