NetEase Homepage Imitation Experience---navigation bar CSS Chapter

Not only the CSS to learn a lot of techniques, and because they also know some SEO, netease some of the Css+seo optimization method, but also harvest many! (I am also a graphic designer, like NetEase this kind of simple type of Web page)

Well, before this strongly recommend you can try Sublime text3 this editor, before using the EditPlus, the former is really very powerful, a lot of plug-ins will make Web development faster, a lot of!!

I first saw NetEase's reset CSS style sheet and Mata tag, where there is a row in the Mata tag

<meta name= "Robots" content= "Index,follow"/>

tell the search engine crawler, these pages can be crawled (in the SEO, the more The above code, search engine crawler first read, so we can add the above code in the navigation bar, increase the amount included). resets the CSS style table with one

. clearfix{*zoom:1;}

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

The latter is known (both in the Book of mastery of CSS and in the CSS Design Guide) is a way to clear the float, but: after this pseudo element in ie6,7 is not supported, so the specific addition of *zoom:1, it can be used to clear ie6,7 floating.

Then, in the place where you float, such as the outermost div of the navigation bar is <div class= "Head-mian clearfix"; The reset style sheet has. Clearfix This class, you can clear the float, and so on, at the outermost of each floating element, you can add a class=clearfix.

The front so much nonsense, very suitable for new people like me to learn more things, these reset style sheet must not copy, must understand why to Reset, why not *{margin:0;padding:0;}. For example, some people do not know, the body of the default blank part, some browsers are used margin:x px, to add a blank, and some browsers are used padding:x px to add a blank, so together are set to 0.

The navigation bar works as follows:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7F/BE/wKiom1crBZ7hXfdbAAAfxxNpNHY385.png "title=" Qq20160505163358.png "width=" "height=" to "border=" 0 "hspace=" 0 "vspace=" 0 "style=" width:700px;height:31px; "alt=" Wkiom1crbz7hxfdbaaafxxnpnhy385.png "/> Any navigation bar must be the following mode

<div class= "Ntes_nav_wrap" >/*width:100%, any resolution is filled, then color and height:45px*/

<div class= "Ntes-nav-main clearfix" >/width:960px,margin:0 auto, Auto landscape centering/

</div>

</div>

Next I only say need novice attention of place, specific code completely can oneself in NetEase to see, I just Paste code there is no meaning.

1, in the navigation bar to add their own page name of the link, such as, from left to right second item 650) this.width=650; "Src=" http://s4.51cto.com/wyfs02/M01/7F/BE/ Wkiom1crbz7hxfdbaaafxxnpnhy385.png "title=" Qq20160505163358.png "width=" "height=" to "border=" 0 "hspace=" 0 " Vspace= "0" style= "width:700px;height:31px;" alt= "Wkiom1crbz7hxfdbaaafxxnpnhy385.png"/>

(Mainly SEO, let the search engine crawler caught the focus of the content page, although the title tag is also written, but it is netease, it means netease all pages, we only do the home page, all the need in the navigation bar plus NetEase home link)

2, we can see almost most of the navigation buttons on the right side have a downward triangle, these buttons do the idea is that the text chain + absolutely positioned after the triangle, the code of the triangle is as follows

. ntes-nav-select-arr{

Position:absolute;

Z-index:10;

Border-color: #c2c2c2 Transparent transparent;

Border-style:solid;

border-width:4px;

top:20px;

right:5px;

    }

The principle is that in a square, the color of the content is not filled, only the top of the four edges are filled, the other is set to transparent (transparent), you can

650) this.width=650; "src=" Http://img1.tuicool.com/NvE3mi.png!web "style=" height:auto;vertical-align:middle; border:0px none;margin:0px Auto;text-align:center;color:rgb (51,51,51); font-family: ' Helvetica Neue ', Helvetica, Tahoma, Arial, Stxihei, ' Microsoft Yahei ', ' Microsoft Jacob Black ', Sans-serif;line-height:27.2px;text-indent:16px;white-space:normal ; Background-color:rgb (254,254,254); "/> (this figure is not filled, but the upper and lower sides border fill the black, the left and right sides border fill the red, then we just arbitrarily put 3 sides of the color set to transparent, Does it make a triangle for the corresponding? ）

3, so many buttons to absolute positioning, are the same triangle, as shown in the code above, we will write the code, remember, to give them a same class, not id,id can only be used once, class is can give multiple elements of the same name class, We'll be class= "Ntes-nav-select-arr."

The advantage is easy to maintain, where to change the icon, we alone, do not affect the CSS triangle code to write again, so with class, must be to facilitate code maintenance, reduce the amount of code, do not mess with

The main usage of class is to see that there are repetitive movements, such as triangles, so be sure to give them a class with the same name as the triangle button, to reduce the amount of code that is written for each class.

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7F/BE/wKiom1crBZ7hXfdbAAAfxxNpNHY385.png "title=" Qq20160505163358.png "width=" "height=" to "border=" 0 "hspace=" 0 "vspace=" 0 "style=" width:700px;height:31px; "alt=" Wkiom1crbz7hxfdbaaafxxnpnhy385.png "/>

4, in fact, all the buttons, set is left floating, someone will say, the right side is obviously floating. Right, right and left, respectively, there is a div, left is floating, right is floating, but each button is left floating, such as the right to the login button to do left floating, then it will be in the parent element (already right floating) on the basis of the left floating.

This is a very important, simple little code amount of important tricks, because as long as you set a class, such as FL, then add a left float to this class, add to the class of all the buttons, we do not have to float around the left, that right floating, maintenance also become simple.

Maybe some friends do not understand my meaning, I suggest you can actually imitate some netease navigation bar, will certainly benefit to the novice.

This article is from the "11522325" blog, please be sure to keep this source http://11532325.blog.51cto.com/11522325/1770476

NetEase Homepage Imitation Experience---navigation bar CSS Chapter