《
CSS实现滑动导航栏效果》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333432013.htm
--> [
网站建设之]CSS实现滑动导航栏效果
人们对于网页的效果请求越来越高了，醒目标导航栏仅仅使用background-repeat来做一个简单的文字导航栏已经远远不够了。在良多场所，导航栏的背景是一个图案，字体也不再是枯燥的宋体，这就需要我们把导航栏的整体效果做图在网页中使用。
首先，组织导航栏的html代码,CSS实现渐变 兼容各主流浏览器。
做图留神：两种状态下导航栏上的文字相对背景图案的位置要相同，否则会呈现过渡效果不平滑，而相同的位置也便于我们在css中进行节制。（如本例，倡议先做好一种效果，而后将其复制再修正色彩，这样文字绝对背景的位置就不会有错了。）
另：假如链接间要留间距等,CSS实现强制浏览器分页，着手前就盘算好，以便做图一步到位。
在本例中：
li元素跟其中的a元素也能够通过其它方式把持地位,CSS实现强制不换行、自动换行、强制换行的css代码；
li元素和a元素分离赋予了id和class，也允许以更简单；
各链接的hover状态背景图片位置都不雷同，均需单独定义，也就是说你也可以把它们离开而不用总连在一起；
而如果把两种状态的图片存成两个图片应用，代码量也是差未几，css sprites的利益也无奈体现。
今天我们就来做一个简略的的滑动导航栏效果，效果如下图：
思路：通过改变链接鼠标悬停状态(hover)的背景图片，来到达把鼠标放上去有高亮显示的效果。
.navbar {height:50px; padding-left:6px; overflow:hidden; background:url(01.jpg) no-repeat;}/*每个a元素都只能显示本人范畴的背景，如果左右有空白、各元素有间距，需要为navbar定义背景图片，否则空缺、间距处看不到我们的图片。*/
.navbar li {display:inline;}
.navbar li a {float:left; height:50px; text-indent:-9999px; background:url(01.jpg) no-repeat;}/*通过text-indent把a元素中的文字暗藏起来；为所有链接定义同一的背景图片。*/
/*以下分辨定义了4个链接的宽度和背景图片位置。（本例中两种状态下文字在水平方向位置相同，在这里每个链接两种状态的背景图片就只有垂直位置不同了，这样掌握起来就更便利。）*/
.navbar li a.urlA {width:78px; background-position:-6px 0;}
.navbar li a.urlA:hover,.navbar li.select a.urlA {background-position:-6px -50px;}
.navbar li a.urlB {width:75px; background-position:-84px 0;}
.navbar li a.urlB:hover,.navbar li.select a.urlB {background-position:-84px -50px;}
.navbar li a.urlC {width:211px; background-position:-159px 0;}
.navbar li a,CSS实现居中显示的几种办法.urlC:hover,.navbar li,css实现多级下拉菜单.select a.urlC {background-position:-159px -50px;}
.navbar li a.urlD {width:126px; background-position:-370px 0;}
.navbar li a.urlD:hover,.navbar li.select a.urlD {background-position:-370px -50px;}
/*background-position两个参数的次序：先程度，后垂直。“先左右，后高低”轻易记错。*/
其次，把导航栏的畸形状态和hover状态做整体后果图并拼合在一张图片上。
最后，通过CSS调整款式，实现终极效果。
Tag： 导航栏 CSS 滑动 导航栏 CSS 滑动
办法：在本例中，咱们是通过调剂各链接hover状况的背景图片位置来使其&ldquo,CSS实现凹陷字效果;看起来产生了转变”。（不清楚？可以先懂得“css sprites”）
<,CSS实战：美化段落文本之首字下沉;ul>
<li id="itemA"><a href="#">首页</a></li>,CSS实例：图片水平垂直居中于DIV（图片宽高未知）;
<li id="itemB" class="select"><a class="urlB" href="#">原创</a></li>
<li id="itemC"><a class="urlC" href="#">对于54173BLOG</a></li>
<li id="itemD"><a class=",CSS实例： nth-child和 nth-type-of的区别;urlD" href="#">网站建设</a></li>
</ul>
//a元素中依然保存文字，这样可以保障用户在加载不到css文件的情形下仍能看到基础的内容。
//每个链接的背景都不同，须要独自定义,CSS实例教程： nth-child和 nth-type-of的区别，所以这里给每个链接一个类。
//li元素的id本例中不用到，但在实际使用中，可以配合js来实现对当前页面的高亮显示。
至此，滑动导航栏制造实现。
(责任编辑：网站建设)
CSS实现滑动导航栏效果相关文章