具体请点击：http://www.verydemo.com/demo_c104_i39818.htmlcss
人们对于网页的效果要求愈来愈高了，醒目的导航栏仅仅使用background-repeat来作一个简单的文字导航栏已经远远不够了。在不少场合，导航栏的背景是一个图案，字体也再也不是单调的宋体，这就须要咱们把导航栏的总体效果作图在网页中使用。html
今天咱们就来作一个简单的的滑动导航栏效果，效果以下图：字体
思路：经过改变连接鼠标悬停状态(hover)的背景图片，来达到把鼠标放上去有高亮显示的效果。网站
方法：在本例中，咱们是经过调整各连接hover状态的背景图片位置来使其“看起来发生了改变”。（不明白？能够先了解“css sprites”）url
首先，组织导航栏的html代码。spa
<ul>code
<li id="itemA"><a href="#">首页</a></li>
<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="urlD" href="#">网站建设</a></li>
</ul>
//a元素中仍然保留文字，这样能够保证用户在加载不到css文件的状况下仍能看到基本的内容。
//每一个连接的背景都不一样，须要单独定义，因此这里给每一个连接一个类。
//li元素的id本例中没有用到，但在实际使用中，能够配合js来实现对当前页面的高亮显示。
其次，把导航栏的正常状态和hover状态作总体效果图并拼合在一张图片上。htm
作图注意：两种状态下blog