CSS常用操作-导航栏

1、垂直导航栏

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>导航栏</title>
 6      <link href="style9.css" type="text/css" rel="stylesheet">
 7 </head>
 8 <body>
 9      <ul>
10         <li><a href="#">导航1</a></li>
11         <li><a href="#">导航2</a></li>
12         <li><a href="#">导航3</a></li>
13         <li><a href="#">导航4</a></li>
14      </ul>
15 </body>
16 </html>

 

css：

 1 ul{
 2     list-style-type: none;/*去掉前面的实心圆*/
 3     margin:0px;
 4     padding:0px;
 5 }
 6 a:link,a:visited{/*去掉下滑线*/
 7     text-decoration: none;
 8     display:block;
 9     background-color: burlywood;
10     color:aliceblue;
11     width:100px;
12     text-align: center;
13 }
14 a:active,a:hover {/*鼠标放上去的设置*/
15     background-color: red;
16 }

 

效果：

 

2、水平导航栏

css代码：

 1 ul{
 2     list-style-type: none;/*去掉前面的实心圆*/
 3     margin:0px;
 4     padding:0px;
 5     background-color: burlywood;
 6     width:460px;
 7     text-align:center;
 8 }
 9 a:link,a:visited{/*去掉下滑线*/
10     text-decoration: none;
11     background-color: burlywood;
12     color:aliceblue;
13     width:100px;
14     text-align: center;
15 }
16 a:active,a:hover {/*鼠标放上去的设置*/
17     background-color: red;
18 }
19 li{
20     display:inline;/*水平摆放*/
21     padding:3px ;
22     padding-left:5px;
23     padding-right:5px;
24 }

 

posted @ 2016-08-10 14:42  UniqueColor  阅读(291)  评论(0)  编辑  收藏  举报