任务4.3使用CSS编辑导航栏.pptxVIP

任务4.3使用CSS编辑导航栏

任务介绍网页中个性的导航栏会使整个网页生动，如图所示，网页的分主导航和侧导航结构，导航的鼠标悬停效果及变色排列效果都很好的修饰了网页界面

任务分析计算机网络具有信息容量巨大和信息种类丰富的特点，人们查看信息经常通过链接来完成。网页中的主要链接称为导航栏，好的导航栏可以让网站的易用性得到充分体现。导航栏有什么规律？鼠标悬停时如何设置？水平导航和垂直导航的异同之处时什么？

1导航栏基础

什么是导航栏导航栏是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。利用导航条，我们就可以快速找到我们想要浏览的页面。

导航栏制作特点导航栏是一个按照一定规则罗列的图本链接，为了能够更方便的编辑，我们可以将链接放在列表中进行编辑。程序如下：navullia…/a/li…/ul/nav导航的关键在于a链接对象的样式控制，在这里使用lia{}给li下的每一个a链接对象编写了样式：?display:block是这里的重点，它使得a链接对象的显示方式由一段文本改为一个块状对象，这样a链接对象能够像一个方块状按钮一样去运作，就可以使用css外边距、内边距等属性给a链接标签加上一系列的样式了。?或：nava…/a…/nav

链接伪类选择器伪类不是真正意义上的类，但它确实作为一个类来使用。当在同一网页中使用两种以上不同样式的超链接，就采用伪类与类名或者id相结合的方式实现。伪类名称含义a:link未访问时的超级链接的状态a:visited访问后的超级链接的状态a:hover鼠标经过、悬停时超级链接的状态a:active鼠标单击不动时超级链接的状态超链接伪类及其含义

关系选择器关系选择器主要包含子代选择器（EF）、相邻兄弟选择器（E+F）、普通兄弟选择器（E~F）。属性名称含义子代选择器（EF）选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用“”表示。兄弟相邻选择器（E+F）选择紧贴在E元素之后的F元素，用“+”表示。选择相邻的第一个兄弟元素。普通兄弟选择器（E~F）选择E元素之后的所有兄弟元素F，作用于多个元素，用“~”隔开。

导航的排列方式导航栏在网页上可以水平放置，也可以垂直放置。在一个页面上可以添加几个导航栏。对导航栏按钮的尺寸、颜色、外观等都可以进行更改。在导航栏上可以显示当前页面的选定状态，可以对水平导航栏在一行中显示的链接数进行相关的设置。

制作如图所示导航栏,使用nav标签定义，导航链接有高宽设置，前面有小图标、下虚线边框，当鼠标悬停时背景颜色变成蓝色。纵向导航栏

垂直导航转换成横向导航栏导航栏设置时，CSS代码基本按照navullia的程序顺序编辑，如果是垂直导航栏，li可以不设置，横向导航栏li采用left浮动。横向导航栏

2css精灵技术

需求分析当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户如图所示。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。如图然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位CSS精灵非常值得学习和应用，特别是页面有一堆icon（图标）或者鼠标经过时有图像变化时应用能够减少网页http请求，加快页面加载速度，提高页面的性能。工作原理应用范围

制作所示链接效果的，采用CSS精灵效果将一张图像分割放置在两个100*50的链接盒子内，鼠标悬停时，链接图像换成给图像的相应图片部分?文字垂直居中主要有两种方式：盒子与行高相同（盒子内进一行的情况下），padding-top与padding-bottom相同