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

制作水平导航栏

时间:2017-01-17 00:53:35      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:设置   ora   lock   set   over   meta   bsp   无下划线   code   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <title>制作水平导航栏</title>
 9 <style type="text/css">
10     ul{
11         list-style-type:none;/*无下划线*/
12         
13     }
14     a{
15         display: block;/*记得把a标签设置成block块元素*/
16         height:30px;
17         line-height:30px;/*文字正中间*/
18         width: 100px;
19         float:left;
20         text-align:center;
21         /*text-indent: 5px;如果不想让文字居中,可以选着缩进*/
22     }
23     ul a:link, ul a:visited {
24         font-size: 16px;
25         color: black;
26         text-decoration: none;/*超链接无下划线*/
27 
28     }
29     ul a:hover, ul a:active {
30         font-size: 16px;
31         background-color: #be3948;
32         text-decoration: none;
33     }
34 
35 </style>
36 </head>
37 
38 <body>
39 <h3>课程难度</h3>
40     <ul>
41         <li><a href="#">全部</a></li>
42         <li><a href="#">初中</a></li>
43         <li><a href="#">中级</a></li>
44         <li><a href="#">高级</a></li>
45     </ul>
46 </body>
47 </html>

 

制作水平导航栏

标签:设置   ora   lock   set   over   meta   bsp   无下划线   code   

原文地址:http://www.cnblogs.com/tankcang/p/6291342.html

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