Thinking
Navigation bar (generally use an unordered list)
Create a navigation structure
1, clear the default style (but unordered list in front of the point just hidden, still exists)
2, to bullets
list-style:none;
3, set the background color for ul
4, the width of the background is provided (in IE6, if the specified width of the element, will be open by default hasLayout)
5, the element is provided centrally
6, a Li, into the transverse direction (floating lead to collapse of the parent element, be solved in)
7, hyperlinks specified width (when you click the specified width Ii only aligned word corresponding to click, not click within the width range) so go for a hyperlink specified width
However, the line element is a hyperlink, the width can not be specified, so it is a super block element before the link is converted into (it is to be noted that the width of a set, a parent element is Li, not UL)
8, set the text center, text-align
9, set margins (appearance) of the upper and lower
10, removing the underline, text-decoration
11, set the font color, bold
12, color change into mouse (provided pseudo-class)
. 1 <! DOCTYPE HTML > 2 < HTML > . 3 < head > . 4 < Meta charset = "UTF-. 8" > . 5 < title > navigation practice </ title > . 6 < style type = "text / CSS" > . 7 / * Clear default layout (unordered list but only in front of the bullet hidden and not removed) * / . 8 * { . 9 margin : 0 ; 10 padding : 0 ; 11 } 12 / * set the navigation of the background color, width, height quilt spreader element content * / 13 is .nav { 14 width : 1000px ; 15 background-Color : # 6495ed ; 16 / * Elimination collapsed height * / . 17 overflow : hidden ; 18 is / * on the margins, the navigation center * / . 19 margin : 20px Auto ; 20 is 21 is 22 is } 23 is / * Clear preceding bullet li * / 24 Li .nav { 25 List-style : none ; 26 is / * Set the contents laterally, but will result in collapse of the height of the parent element * / 27 a float : left ; 28 / * specified width for each content * / 29 width : 25% ; 30 31 is } 32 .nav a { 33 is / * will be converted into a block element * / 34 is the display : block ; 35 / * remove the hyperlink underline, font changes and the white bold * / 36 text-Decoration : none ; 37 [ font : "Microsoft yahei" ; 38 is Color : White ; 39 font-weight : Bold ; 40 width : 100% ; 41 is / * centering * / 42 is text-align = left : Center ; 43 is / * set padding * / 44 is padding : 5px 0 ; 45 46 is } 47 /*鼠标移入换颜色*/ 48 .nav a:hover{ 49 background-color: #c00; 50 } 51 </style> 52 </head> 53 <body> 54 <ul class="nav"> 55 <li><a href="#">首页</a></li> 56 <li><a href="#">内容</a></li> 57 <li><a href="#">联系</a></li> 58 <li><a href="#">关于</a></li> 59 </ul> 60 </body> 61 </html>
Results pictures
Red color when the mouse is moved
If you want to add a few more links, you can change the width of the