跟着小徐混

> 

  最近被那xhtml，css整得不成人样了，总有种看了就想晕的感觉，可自身性格决定，就是要征服它，喜欢具有挑战性的东西。
   写了个鼠标翻转导航的css，可就是出不来，也找不着原因，最后鼓起勇气将自己的代码发给一个朋友让帮忙看哈，被训得狗血淋头，也就只能默认了，因为他说得在理嘛！‘结构混乱，缺乏逻辑性。。。。。’
   偶然在小毅的BLOG上发现了这篇‘倾斜的鼠标翻转导航制作上的烦恼’，昨晚仔细研究了下，学到不少东西，在这里要隆重推荐这篇文章

     （我有个朋友叫小毅子噢，可惜不是小毅，55555555555555！）

    我们先看一下想要实现的效果，当然在没做之前这些只能是存在于我们的脑子或是草图上。我们首先要想到它是个什么样子，然后才能去分析我们想要实理的效果是应该如何去做，闲言少叙，先看图：

我们看到上图，可以会觉得好像并没什么，好像很容易做。好我们来细细的分析一下这个效果。我们用标准来实现就不能直接插入一张图片在HTML里。用标准来做就需要把图片作为背景的方式用CSS进行调用。那么我们来看一下这样的导航是否可以直接就那么直接调用，其中是不是还有什么问题出现？下面请看一下这个导航效果的放大图：

大家注意上图中的“危险区”很明显，如果我们把两个倾斜的正块放在一起就必然会有一段重复区，我们现在的CSS还不支持异形处理。要解决这个问题就必需要使得这两个方块进行重叠。重叠就需要把他们放在不同的层次上。这就要用到CSS中的定位：“position: static | absolute | fixed | relative”。关于position的详细请查看苏昱的《CSS2中文手册》，关于如何定位请查看我的《解读absolute与relative》

做鼠标翻转我们通常会把所有的背景做成一个图，然后通过CSS来设置不同标签下的图片的不同位置。也许有人就会认为这个导航的背景图应该是这样的：

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

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

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

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

  

   
HOME

   
ABOUT

   
PRODUCT

   
SEVICE

   
FEEDBACK

  

由于我们的这个导航每一个区域都不一样所以需要给每个块都加个ID。有了结构了下面就是CSS的部分了。我们这个导航是横向的，那么我们要先让这个UL列表先躺下：

#nav {padding:0; margin:0; width:410px; height:25px; line-height:25px; overflow:hidden; list-style:none; }
#nav li {width:82px; height:25px;  float:left;}

当我把UL放躺下之后突然想到它躺下的姿势不对，为什么呢，因为我们需要的是后一个叠在前一个的尾巴上的效果，而不是脑袋顶着屁股。所以这里需要改成：

#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; }

 这里的#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;}

我们这里看到，中其并没有 #a a 这是因为#aa的显示内容就是当前内容，所以这句可以省了，由于#nav a中已经定义了背影图片了由于#nav a包括了#a a、#ba…，所以这里只要做好背景的位置就好了。再浏览一下，是正确了，但是还没有鼠标翻转的效果。下面再来把这个鼠标翻转的效果再补上：

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

大家也看到了，这里也有很多重复的，可不可以再省略呢？如果只是针对IE流览器是可以的，因为IE在背景两个私有属性叫：background-positionX，background-positionY。但是Firefox与Opera都不支持，所以这里就不能省。基本上是成功了不过还有一个小细节，细心的朋友一定发现了，LI的位置移动是以79PX为一个单位，而图片则都是82PX的，链接也是82PX的大小。所以我们开头的#nav的长度是错的，正常的是398px，为什么是398px那就自己想想算算吧！下面给出全部的CSS代码：

  #nav {padding:0; margin:0; width:398px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;}
  #nav li {width:82px; height:25px; position:absolute; top:0;}

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

  #nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(bg.gif) no-repeat;}
  #b a {background-position: -82px 0px;}
  #c a {background-position: -164px 0px;}
  #d a {background-position: -246px 0px;}
  #e a {background-position: -328px 0px;}

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

      我有个朋友叫小毅子噢，可惜不是小毅，55555555555555！

> 


  为了庆祝萍儿的解脱
   为了庆祝我的即将离开
    慧姐姐请客
  ‘聚闲阁’，酸菜鱼火锅。



  小伢就喜欢吃鱼，已经跟姐姐们讲了，以后你们不管在哪，只要请小伢吃酸菜鱼火锅就行，喜欢吃鱼的人聪明，以后生的儿子也聪明哦！
  
   我和萍儿给选了条3斤6两的草鱼，然后师傅们去做了。鱼儿鱼儿，冒怪我，我也是为了将你的光耀发挥至极点，以来补充我那不太灵光的脑袋，更有可能会影响到未出生的小生命呢，所以不小心吃了你噢！

   萍儿考完了，她说专业课可能有点问题，题目蛮活的，其实没关系，一直都相信萍儿的实力，杀遍天下无敌手，你不上还谁能上的，重点实验室的大门对你大敞着；慧姐姐的学业方面事情老早搞定，中科院大门的那把锁的钥匙她早已拿到手，只是个人问题等待中，（顺便在此给慧姐姐发个征。。。，嘿嘿，是我征姐夫）我经常告慧姐姐，北京那地的好姐夫多得去了，你信手拈来就是，不过有点，姐夫要顺带疼我的，不然的话不要。小霞那丫现在北京她导师那呢，因此此次聚会缺席。

   跟姐姐们在一起生活也差不多一年了，还是蛮多乐趣的哦，姐姐们讲我是快乐的源泉哦，宿舍里那大声吆喝，大谈阔谈web的丫必定是我。兴许以后大家见面的日子会少很多很多，所以我将这顿饭定义为我饯行的。我告萍儿，你一定坚守阵地，这儿就是我的窝，我一定会回来看你的，萍儿说“等你两年，你给要发财的哦”好有压力哦，两年内就要发财，那我两年内找到一个好老公算得上是发财了么，好老公咧，应该定义为无价的。

   喜欢小毅子的‘宁缺毋滥’，小尼子也喜欢‘宁缺毋滥’。

  即将要生活在新的环境中了，祝福一下自己07年新认识的朋友，大家好好生活，好好学习，好好工作，5年后，事业成熟了，心志也成熟了，一切都OK了！

>     
                

   07年武汉的雪不知不觉就来了，惊喜它的到来，起了个大早去操场感受一翻，庆幸自己的早床，因为这雪融化得也太快了点，这不今天就给出太阳了，终于鼓起勇气拿起久违的拍子跟惠姐姐风风火火去球场了。

     球场上没有看到熟悉的身影，当然也是没场地的，（‘武测的羽毛球那个火啊！’珞珈山水就有帖子如是说）我们站场地外观察，看哪个场子的GG的技术比较好，上去与之切戳一翻，旁边有GG自动叫我们混双哦，（大概是看到两个美女的原因吧）也管不了那多就给上场。美女的技术那是不用多说的了，在那两大一的GG面前还是可以耍两把的。惠姐姐今天是没亏，给认了个山西的老乡，他俩不干别的，就将球往我脸上抽，我还要不要嫁人了的，我亲爱的惠姐姐 尽管好久没摸拍子了，球感还是不错的，打得也比较尽兴吧！混双打11点，好象那两个山西佬老赢我们这两湖.我们场子旁边的旁边那个场地有个叫宋杰的帅GG也在打球噢，跟他较量过两次，好强的帅GG噢，（背地里大家都叫他‘红酷男’），只可惜今天没机会跟他切磋。

   睡觉了，萍儿那丫明天要考研，不忍心打扰她了！

   祝福：萍儿，‘姐夫’，邋遢，余超明后两天的考研路一切OK！

   考完吃重庆冷锅鱼喽，期待！