网易首页模仿心得---导航栏CSS篇

        不仅是CSS方面学习到很多技法，而且由于自己也懂一些SEO，对网易的一些CSS+SEO优化方法，也收获颇多！（本人也是平面设计师，很喜欢网易这类简约型的网页）

        好了，在此之前强烈推荐大家可以尝试一下sublime text3 这款编辑器，之前用的editplus，感觉前者真的非常强大，很多插件会让网页开发的速度快很多，很多！！

        我首先看了网易的重置CSS样式表和mata标签，其中mata标签中有一行

        <meta name="robots" content="index,follow" />

        告诉搜索引擎爬虫，这些网页可以抓取（在SEO里面，越是上面的代码，搜索引擎爬虫越是先读取，所以我们在导航栏可以加上面那段代码，增加收录量）。重置CSS样式表里，有一项

        .clearfix{*zoom:1;}

.clearfix:after{display:block; overflow:hidden; clear:both; height:0;     visibility:hidden; content:".";}

        后者大家都知道（在精通CSS这本书和CSS设计指南这本书中都有介绍）是清除浮动的一种方法，但是：after这个伪元素在IE6，7不支持, 所以特定加了*zoom：1，它可以用来清除IE6，7浮动。

        然后，在你用浮动的地方,比如导航栏最外层的div是<div class="head-mian clearfix">，而重置样式表有.clearfix这个类，就可以清除浮动了，以此类推，在每一个浮动元素的最外层，都可以加一个class=clearfix。

        前面那么多废话，很适合像我这样的新人去了解更多的东西，这些重置样式表一定不要照抄，一定要理解为什么要重置，为什么不用*{margin：0；padding：0；}。比如，有些人就不知道，body的默认空白部分，有的浏览器是用margin：X px,来加上空白的，有的浏览器是用padding：X px来加上空白的，所以要一起都设置为0。

        导航栏效果如下：

                任何导航栏一定是如下的模式

   <div class="ntes_nav_wrap"> /*width:100%，任何分辨率都填满，然后是颜色和height：45px*/

   <div class="ntes-nav-main clearfix"> /width:960px,margin:0 auto，自动横向居中/

   </div>

   </div>

   接下来我只说需要新手注意的地方，具体代码完全可以自己在网易上去看，我只贴代码就没有什么意思了。

    1、在导航栏加上自己网页的名字的链接，如下图，从左到右第二项

（主要是SEO方面，让搜索引擎爬虫抓到内容页的重点，虽然在title标签也写了，但是写的是网易，它的意思是网易所有网页，我们只做首页，所有需要在导航栏加上网易首页链接）

    2、我们可以看到几乎大部分的导航按钮的右边都有一个向下的三角形，这些按钮做的思路就是，文字链+绝对定位后的三角形，三角形的代码如下

    .ntes-nav-select-arr{

position: absolute;

z-index:10;

border-color: #c2c2c2 transparent transparent;

border-style: solid;

border-width: 4px;

top:20px;

right:5px;

    }

 原理就是，在一个正方形中，不填充内容的颜色，只填充四个边的顶端，其它设置为透明（transparent）,就可以了

（这个图没有填充，但是上下两边border填充的黑色，左右两边border填充的红色，那么我们只要随便把3个边的颜色设置为透明，是不是就对应的做出一个三角形了呢？）

    3、这么多按钮都要绝对定位，都是同样的三角形，如上面代码所示，我们就在编写代码之前，记住，要给他们设定一个同样的class，而不是id，id只能用一次，class是可以给多个元素设定同样名字的class，我们定为class="ntes-nav-select-arr"

    好处就是易于维护，哪里换图标，我们单独换，不影响再写一遍CSS三角形代码，所以用class，一定是为了方便代码维护，减少代码量，不要乱用

    class最主要的用法就是，看到有重复的动作，比如三角形这么多，那么肯定要给这些都有三角形的按钮价格同名的class，来减少每一个都写class的代码量。

    4、其实所有的按钮，设置的是左浮动，有人就会说，右边明显是右浮动。对的，右边和左边，分别都有一个div，左边是左浮动，右边是右浮动，但是每个按钮都是左浮动，比如右边先对登录按钮做左浮动，那么它会在父元素（已经右浮动的）的基础上，左浮动。

    这是一个非常重要，简少代码量的重要技巧，因为只要设置一个类，比如fl，那么给这个类加一个左浮动，加在所有按钮的class上，我们就不用到处这个左浮动，那个右浮动，维护也变得简单。

    可能有些朋友没懂我的意思，我建议你可以实际模仿一些网易的导航栏，一定会对新手受益匪浅。