首页 > 代码库 > 简单的导航2
简单的导航2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://www.mamicode.com/normalize.css"/>
<!--<link rel="stylesheet" href=""/>-->
<link rel="stylesheet" href="http://www.mamicode.com/douban.css"/>
</head>
<body>
<div class="firstbox">
<header>
<nav>
<ol>
<li><a href="http://www.mamicode.com/#">豆瓣</a></li>
<li><a href="http://www.mamicode.com/#">读书</a></li>
<li><a href="http://www.mamicode.com/#">电影</a></li>
<li><a href="http://www.mamicode.com/#">音乐</a></li>
<li><a href="http://www.mamicode.com/#">同城</a></li>
<li><a href="http://www.mamicode.com/#">小组</a></li>
<li><a href="http://www.mamicode.com/#">阅读</a></li>
<li><a href="http://www.mamicode.com/#">FM</a></li>
<li><a href="http://www.mamicode.com/#">东西</a></li>
<li><a href="http://www.mamicode.com/#">市集</a></li>
<li><a href="http://www.mamicode.com/#">更多</a></li>
<li><a href="http://www.mamicode.com/#">豆邮</a></li>
<li><a href="http://www.mamicode.com/#">提醒</a></li>
<li><a href="http://www.mamicode.com/#">下载豆瓣客户端</a></li>
</ol>
<ul>
<li><img src="http://www.mamicode.com/img/lg_main_a11_1.png" /></li>
<li><a href="http://www.mamicode.com/#">首页</a></li>
<li><a href="http://www.mamicode.com/#">我的豆瓣</a></li>
<li><a href="http://www.mamicode.com/#">浏览发现</a></li>
<li><a href="http://www.mamicode.com/#">移动应用</a></li>
<li><a href="http://www.mamicode.com/#">游戏</a></li>
<li><a href="http://www.mamicode.com/#">线上活动</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