【案例】米柚导航条实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>米柚导航条</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
#container{
width: 100%;
height: 48px;
background: #FD6440;
margin-top:120px;
}
#container>#nav{
width: 980px;
height: 48px;
margin: 0 auto;
}
#container>#nav>ul>li{
float: left;
height: 48px;
line-height: 48px;
}
#container>#nav>ul>li:hover{
background: #f75733;
}
#container>#nav>ul>li.active{
background: #f75733;
}
#container>#nav>ul>li>a{
font-size: 14px;
height: 48px;
color: #fff;
display:block;
padding: 0 16px;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul id="lists">
<li><a href="">首页</a></li>
<li><a href="">新帖</a></li>
<li><a href="">版块</a></li>
<li><a href="">MIUI专区</a></li>
<li class="active"><a href="">资源分享</a></li>
<li><a href="">谈天说地</a></li>
<li><a href="">俱乐部</a></li>
<li><a href="">MIUI下载</a></li>
<li><a href="">论坛APP</a></li>
</ul>
</div>
</div>
</body>
</html>
