您的位置：首页 > Web前端 > CSS

CSS常用操作-导航栏

2016-08-10 14:42 357 查看

1、垂直导航栏

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<link href="style9.css" type="text/css" rel="stylesheet">
</head>
<body>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
</html>

css：

ul{
list-style-type: none;/*去掉前面的实心圆*/
margin:0px;
padding:0px;
}
a:link,a:visited{/*去掉下滑线*/
text-decoration: none;
display:block;
background-color: burlywood;
color:aliceblue;
width:100px;
text-align: center;
}
a:active,a:hover {/*鼠标放上去的设置*/
background-color: red;
}

效果：

2、水平导航栏

css代码：

ul{
list-style-type: none;/*去掉前面的实心圆*/
margin:0px;
padding:0px;
background-color: burlywood;
width:460px;
text-align:center;
}
a:link,a:visited{/*去掉下滑线*/
text-decoration: none;
background-color: burlywood;
color:aliceblue;
width:100px;
text-align: center;
}
a:active,a:hover {/*鼠标放上去的设置*/
background-color: red;
}
li{
display:inline;/*水平摆放*/
padding:3px ;
padding-left:5px;
padding-right:5px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航