不仅是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上，我们就不用到处这个左浮动，那个右浮动，维护也变得简单。
可能有些朋友没懂我的意思，我建议你可以实际模仿一些网易的导航栏，一定会对新手受益匪浅。
本文出自 “11522325” 博客，请务必保留此出处http://11532325.blog.51cto.com/11522325/1770476
原文地址：http://11532325.blog.51cto.com/11522325/1770476
