简单的菜单栏

查询CSS样式:http://www.w3school.com.cn

margin设置外边距
display按行显示
padding设置内边距
padding-right字体内部间隔
background-color背景颜色
id选择器前面是一个#号
class选择器前面是一个.

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>菜单栏</title>
 6     <!--
 7      margin设置外边距
 8      display按行显示
 9      padding设置内边距
10      padding-right字体内部间隔
11      background-color背景颜色
12      id选择器前面是一个#号
13      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>

猜你喜欢

转载自www.cnblogs.com/hzyhx/p/11026455.html