简单的导航2
Posted 多多哟哟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的导航2相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="normalize.css"/>
<!--<link rel="stylesheet" href=""/>-->
<link rel="stylesheet" href="douban.css"/>
</head>
<body>
<div class="firstbox">
<header>
<nav>
<ol>
<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>
<li><a href="#">阅读</a></li>
<li><a href="#">FM</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>
<li><a href="#">下载豆瓣客户端</a></li>
</ol>
<ul>
<li><img src="img/lg_main_a11_1.png" alt=""/></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>
<li><a href="#">线上活动</a></li>
<li><input type="text" placeholder="请输入关键词"/></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
部分CSS代码：
*{
padding: 0;
margin: 0;
}
.firstbox{
width: 100%;
height: 101px;
}
header ol{
list-style: none;
height: 28px;
background-color: darkgrey;
line-height: 28px;
}
header ol li{
width: 50px;;
height: 28px;
float: left;
}
header ol li:nth-child(12) {
width: 100px;
float: right;
}
header ol li:nth-child(13){
width: 100px;
float: right;
}
header ol li:nth-child(14){
width: 220px;
float: right;
}
header li a{
text-decoration: none;
}
header ul{
height: 73px;
width: 951px;
width: auto;
background-color:#edf4ed;
}
header ul li{
float: left;
display: block;
line-height: 73px;
}
header ul li:nth-child(1){
width: 153px;
height: 30px;
margin-left: 12%;
}
header ul li {
margin-left: 3%;
}
以上是关于简单的导航2的主要内容，如果未能解决你的问题，请参考以下文章