如果你真的是这么想的那么问题就出来了：当在五个区块中的任一个区块中进行鼠标翻转时，上面的危险区的重复部位就会把左侧和是右侧的导航挡去一个角。所以正常的方式是：

只有这样在没有危险区的情况下才能作为最终的背景图片使用。当然还要注意的是背景并不是白色而是透明的，主要不是为了与网站的背景融合，关键是不要挡住在危险区的相邻的背景。我使用的是GIF图，GIF图有透明的时候边缘会有一点毛边。如果希望应对不同的色彩的网站背景，最好使用PNG或是把GIF图的边缘做成点像素。

对于这个背景图的思考完成之后我们就需要想想怎么制作这个导航了。先来分析一下这个鼠标翻转，原来做鼠标翻转是JS的事，现在可以通过CSS的：hover也可以实现这个翻转效果，代码少、结构清晰。所以这里这五个导航的翻转就是由A:hover来实现。关于a:hover的详细解解释可以查阅一下苏昱的《CSS2中文手册》。

首先我先写下了这个导航的HTML代码，由于是结构，要尽可能的简洁干净：

  <ul id="nav">
   <li id="a"><a href="" title="">HOME</a></li>
   <li id="b"><a href="" title="">ABOUT</a></li>
   <li id="c"><a href="" title="">PRODUCT</a></li>
   <li id="d"><a href="" title="">SEVICE</a></li>
   <li id="e"><a href="" title="">FEEDBACK</a></li>
  </ul>

这里的#nav为什么要加一个position:relative; 呢？请查阅《解读absolute与relative》而 padding:0; margin:0; list-style:none;是为了去掉UL前的那个黑点，并且清除浏览器中UL的默认值。你也可以在CSS文件的开头用一句 *{padding:0; margin:0; list-style:none;}来清理一下标签在浏览器中的默认值。把他们放躺下之后我看了一下效果，不得了，所有的链接全都合到一起了。因为所有的LI都被定义成为绝对值大家都跑到原点对齐去了。我们需要把他们分开。所以接着写CSS把他们都分开：

#a {left:0px; top:0px; }
#b {left:79px; top:0px;}
#c {left:158px; top:0px;}
#d {left:237px; top:0px;}
#e {left:316px; top:0px;}

我们发现他们的TOP值都是0，为了让代码少一点我们把CSS再做一次修改：

#nav {padding:0; margin:0; width:410px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;}
#nav li {width:82px; height:25px; position:absolute;  top:0px;} 
#a {left:0px;} 
#b {left:79px;} 
#c {left:158px;} 
#d {left:237px;} 
#e {left:316px;}

都已经区分开，下面就是加背景图片了。这里要注意：图片要加在A标签上，如果不然可能就会出现错误。当然也可以放在UL背景或是li上，但是那样做法、图片就都不一样了，可能也不太好理解。这里只以放在A标签上。

#nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(bg.gif) no-repeat;}

这里我们把A标签也定义为宽为82高为25的方块，这里要注意一定要把A定义为块：display:block; 因为只有这样才可以完全显示背景图片。与overflow:hidden;相结合还可以把A标签中的文字挤出显示区，当然他的父级标签也要有overflow:hidden;不然在IE下还是会出现溢出显示的现象。加上一个背景图，这时浏览一下我们发现五个区块只出现图片的第一区，五个块都是一样的。我们需要把五个块应有的显示内容表现出来。就需要再加一些指令：

#b a {background-position: -82px 0px;} 
#c a {background-position: -164px 0px;} 
#d a {background-position: -246px 0px;} 
#e a {background-position: -328px 0px;}

出处：蓝色理想
责任编辑：blue

上一页 倾斜的鼠标翻转导航制作上的烦恼 [1] 下一页 倾斜的鼠标翻转导航制作上的烦恼 [3]

◎进入论坛网页制作、网站综合版块参加讨论