Simple menu bar

CSS style query: http://www.w3school.com.cn

Margin margin setting
display displayed in rows
padding padding disposed
padding-right internal compartment Font
background color background-color
front selector id # is a number
in front of a class is selected.

. 1  <! DOCTYPE HTML > 
2  < HTML lang = "ZH" > 
. 3  < head > 
. 4      < Meta charset = "UTF-. 8" > 
. 5      < title > menu bar </ title > 
. 6      <-! 
. 7       margin Margin Settings
 . 8       the display displayed in rows
 9       padding disposed padding
 10       padding-right Font internal compartment
 . 11       background color background color-
 12       in front of the selector id is a #
 13       in front of the selector is a class.
 14      ->
15      <style type="text/css">
16        body{
17           margin:0px;
18        }
19         
20         li{
21            color:#fff;
22            display:inline;
23            padding-right:20px;
24         }
25         
26         .nav{
27              padding-top:15px; 
28              padding-bottom:15px;
29              background-color:#333;
30         }
31      
32      </style>
33 </head>
34 <body>
35 <div class="nav">
36     <ul>
37         <li>Java</li>
38         <li>CSS</li>
39         <li>HTML</li>
40         <li>JavaScript</li>
41         <li>jQeury</li>
42     </ul>
43 </div>
44 </body>
45 </html>

 

Guess you like

Origin www.cnblogs.com/hzyhx/p/11026455.html