码迷,mamicode.com
首页 > 其他好文 > 详细

简单的导航2

时间:2017-05-31 00:28:45      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:first   css   put   移动应用   src   img   ima   lis   list   

技术分享

<!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" /></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

标签:first   css   put   移动应用   src   img   ima   lis   list   

原文地址:http://www.cnblogs.com/dzlduoduo/p/6921732.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!