码迷,mamicode.com
首页 > 其他好文 > 详细

导航栏

时间:2015-08-30 19:24:13      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

当我们打开网页的时候都会看到有导航栏,如下是我完成的一个导航栏的制作,效果如图所示:技术分享

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         /**通配符选择器,权值是1*/
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         /*蓝色的背景框,设置高为30个像素,添加背景颜色*/
13         .nav{
14             height: 40px;
15             width: 800px;
16             margin: 100px auto;
17             background-color: #00AFFF;
18         }
19         /*ul{
20            float: right;    给ul加向右的浮动是可以将导航栏放在右边
21         }*/
22         /*列表样式设为没有,默认是一个实心的小黑园,每一个li设置向左的浮动,块级li会脱离常规流,在同一行上依次排列*/
23         li{
24             list-style: none;
25             float:left;
26         }
27 
28         a{
29             line-height: 40px;  /*单行文本居中,可将文本的高度设置为包裹其外层即nav的高度*/
30             text-decoration: none;  /*a标签默认有下划线,这里是为了取消下划线*/
31             display: block;   /*a标签是一个行内元素,将其转换为块级元素*/
32             height: 40px;     /*将其高度设置和nav一样高*/
33             margin-left: 30px;
34             padding: 0 14px;
35         }
36        a:hover{     /* :hover伪类,当鼠标放在文字上时,背景颜色改变为白色*/
37             background-color: #ffffff;
38         }
39       .sousuo{
40           float: right;
41           margin: 4px 20px;
42           height: 30px;
43           width: 200px;
44           border: 1px groove ;  /* groove让边框产生一个凹进去的效果*/
45           background-color: white;
46       }
47         #text{
48             width: 150px;
49             height: 30px;
50             border: none;
51             float: left;
52         }
53         #submit{
54             height: 30px;
55             width: 50px;
56             border: none;
57             background-color:#00AFFF ;
58             float:left;
59             cursor: pointer;  /*当鼠标放在上面会变成一个小手*/
60         }
61     </style>
62 </head>
63 <body>
64 <div class="nav">
65     <ul>
66         <li><a href="">首页</a></li>
67         <li><a href="">新闻</a></li>
68         <li><a href="">百科</a></li>
69         <li><a href="">问答</a></li>
70     </ul>
71 
72     <div class="sousuo">
73         <label for="text"></label><input id="text" type="text" placeholder="请输入内容"/>
74         <!--给文本本框设置默认值除了placeholder,还可以用value值,然后添加JavaScript的onfocus事件-->
75         <label for="submit"></label><input id="submit" type="submit" value="搜索"/>
76     </div>
77 </div>
78 </body>
79 </html>

 导航栏除了文本导航栏,还有图片导航栏等.

导航栏

标签:

原文地址:http://www.cnblogs.com/justyq/p/4771182.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!