Heavenly Book notes: html+css Implement top navigation bar

This note is purely my brain residual notes, reading difficulties do not understand the normal phenomenon, beginners try not to read, otherwise light mouth foaming heavy is off the mind, remember

First Sun:

The effect requirements are similar to the top navigation of station B (.. Excuse me for always taking B station as an example:) ）

Then the code

The following analysis of this pile of things

The HTML section is mainly this:

1 <Divclass= "Topbar">2     <Divclass= "Topbody">3     <aclass= "title"href="">Title</a>4     <ulclass= "Toplist">5         <Li><ahref="">Item 1</a></Li>6         <Li><ahref="">Item 2</a></Li>7         <Li><ahref="">Item 3</a></Li>8         <Li><ahref="">Item 4</a></Li>9     </ul>Ten     </Div> One </Div> A     

Css:

1 *{2 margin:0px;3 padding:0px;4}5 . Topbody{6 width:900px;7 margin:0 Auto;8}9 . Topbar{Ten width:100%; One Background-color:#000; A Display:Inline-block; -} -  the . Topbar Li{ - float: Left; -} - . Toplist{ + Display:Inline-block; - List-style-type:None; +} A . Toplist a{ at Color:#FFF; - text-decoration:None; -} - . Title,.toplist a{ - Display:Block; -      in Display:Block; - float: Left; to} + . Toplist a{ - padding:15px 20px 15px 20px; the} * . Title{ $ Color:#FFF;Panax Notoginseng text-decoration:None; - padding:15px 30px 15px 30px; the}

The top bar is mainly surrounded by a class of Topbar Div, and then nested inside a topbody because the next step is to set the width. There is also a set of headings. The most pit dad is the top column items must be surrounded by UL, F12 a lot of sites are written like this, specifically why I do not know, is it possible to make the browser a better rendering page? With the UL more pit dad is to deal with those several styles, to know that the UL default is a dot. So we need to get rid of this point. Baidu after a while finally know the List-style-type set to none on it

As for the above mentioned Topbody: here Topbody as the main layer to play a fixed width of the role, to prevent the display area of a large in the project to follow the situation. CSS uses the margin center method and specifies a width

1 . Topbody {2    width:900px;  3    margin: 0 auto;  4 }

The handling of the project needs to be noted that all elements in the Topbar (A and Li here) are display:block and float:left,display:block are useful for setting up padding, and float:left is floating to the left. Then basically all used float:left this thing will appear the parent container can not open the case (height of 0), then use Display:inline-block;

This note is purely my brain residual notes, reading difficulties do not understand the normal phenomenon, beginners try not to read, otherwise light mouth foaming heavy is off the mind, remember

Heavenly Book notes: html+css Implement top navigation bar