<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*ul{*/
/*list-style-type: none;*/
/*margin: 0px;*/
/*padding: 0px;*/
/*}*/
/*去掉下划线*/
/*a:link,a:visited{*/
/*text-decoration: none;*/
/*display: block;*/
/*background-color: darkgoldenrod;*/
/*color: #ffffff;*/
/*width: 50px;;*/
/*}*/
/*当鼠标放上去时*/
/*a:hover,a:active{*/
/*background-color: red;*/
/*}*/
/*水平导航*/
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
width: 400px;;
text-align: center;
background-color: darkgoldenrod;
}
/*水平显示,通过padding把导航变宽*/
li{
display: inline;
padding:3px;
padding-right: 5px;
padding-left: 5px;;
}
/*去掉下划线*/
a:link,a:visited{
text-decoration: none;
color: #ffffff;
width: 50px;;
}
/*当鼠标放上去时*/
a:hover,a:active{
background-color: red;
}
</style>
</head>
<body>
<!--
导航栏的设计
-->
<!--垂直导航栏-->
<!--<ul>-->
<!--<li><a href="#">导航一</a></li>-->
<!--<li><a href="#">导航2</a></li>-->
<!--<li><a href="#"> 导航3</a></li>-->
<!--<li><a href="#">导航4</a></li>-->
<!--</ul>-->
<!--水平导航-->
<ul>
<li><a href="#">导航一</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#"> 导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
</html>