首页 > 其他 > 详细

简单的菜单栏

时间:2019-06-15 10:54:02      阅读:100      评论:0      收藏:0      [点我收藏+]

查询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>

 

简单的菜单栏

原文:https://www.cnblogs.com/hzyhx/p/11026455.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!