初学CSS,利用CSS浮动和无序列表制作一个简易导航栏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
{
margin: 0;
padding: 0;
}
div
{
width: 1080px;
height: 200px;
border: 10px solid skyblue;
}
div .nav
{
text-align: center;
list-style: none;
padding-left: 20px;
}
div .nav li
{
background-color: coral;
float: left;
width: 160px;
height: 40px;
margin: 5px;
}
div .nav li a
{
display: block;
width: 160px;
height: 40px;
font: 16px/40px "微软雅黑";
color: springgreen;
text-align: center;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li><a href="#">网页</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">新闻</a></li>
</ul>
</div>
</body>
</html>
运行效果：
有问题欢迎留言！~~~~~