使用float浮动和超链接制作水平菜单
实例代码；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
background-color:#303030;
width:800px;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li a{
display:inline-block;
padding:14px 16px;
float:left;
color:white;
}
.a1{
background-color:red;
}
a:hover{
background-color:black;
}
</style>
</head>
<body>
<h1>导航菜单实例</h1>
<div>
<ul>
<li><a class="a1" href="https://www.dwoke.com">Home</a></li>
<li><a href="https://www.dwoke.com">News</a></li>
<li><a href="https://www.dwoke.com">Contact</a></li>
<li><a href="https://www.dwoke.com">About</a></li>
</ul>
</div> </body>
</html>
运行效果：
评论