不仅是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。

        导航栏效果如下:

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

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

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

   </div>

   </div>

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

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

(主要是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的代码量。

wKiom1crBZ7hXfdbAAAfxxNpNHY385.png

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

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

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