摘要：边学边忘，看来只有复习加练习才能解。
作业里DIV布局没有使用浮动而使用了定位，因为我定位忘的像是没学过一样，就逮这机会回忆一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="chortcut
边学边忘，看来只有复习加练习才能解。
作业里DIV布局没有使用浮动而使用了定位，因为我定位忘的像是没学过一样，就逮这机会回忆一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="chortcut icon" type="image/x-icon" href="picture/666.jpg">
<title>demo</title>
<style>
*{margin:0px; padding:0px;}
body{margin:5px;20px;} /*外边距*/
.box1{display:inline-block; float:right;} /*顶部两个导航显示在同一行*/
.header1{margin:0px 10px; list-style:none; float:right; text-decoration:underline; /*顶部导航向右浮动*/
font-weight:bold; font-size:14px; /*顶部导航部分加粗*/
}
.header1_1{margin:0px 10px; list-style:none; float:right; text-decoration:underline; font-size:14px;}
.header2{list-style:none; text-decoration:none; float:left; width:60px; /*蓝色导航向左浮动*/
font-size:16px; font-weight:bold; color:white; line-height:40px; text-align:center;
}
.header2:hover{background:red;} /*背景变红*/
.clear{clear:both;}
.box2{text-align:center;margin-top:25px} /*洋葱搜索栏*/
.box3{display:inline-block; height:250px; width:350px; vertical-align:top;} /*第一行内容区,div顶部对齐*/
.box3 ul li{list-style:none; font-size:16px; font-family:微软雅黑; margin:5px 10px;}
.box3 ul li:hover{text-decoration:underline;}
input{border:1px solid orange; height:20px; width:210px;margin-top:15px; padding:5px}
button{border:none; height:32px; width:222px;margin-top:15px; background:orange;}
p{font-family:黑体; font-size:14px; text-align:center; color:orange;}
</style>
</head>
<body>
<div>
<div class="box1" style="margin:0px 0px 0px 50px;"> <!--距左50px-->
<ul>
<li class="header1_1">洋葱新闻客户端</li>
<li class="header1_1">注册</li>
<li class="header1_1">登入</li>
<li class="header1_1">洋葱首页</li>
</ul>
</div>
<div class="box1">
<div>
<ul>
<li class="header1">文库</li>
<li class="header1">地图</li>
<li class="header1">视频</li>
<li class="header1">图片</li>
<li class="header1">音乐</li>
<li class="header1">知道</li>
<li class="header1">贴吧</li>
<li class="header1">新闻</li>
<li class="header1">网页</li>
</ul>
</div>
</div>
</div>
<div class="clear" style="background:#ccc; height:1px; position:relative; top:5px;"></div>
<div class="box2" style="position:relative; top:15px">
<img src="picture/logo_news.png" style="height:40px; width:130px;" align="center">
<input type="text" placeholder="火星人即将造访地球" style="width:537px;height:40px;">
<button style="height:42px; width:90px; background:#1C6AD8; border:none; color:white; font-size:17px;">洋葱一下</button>
<ul style="display:inline-block;">
<li class="header1_1">帮助</li>
<li class="header1_1">高级搜索</li>
<li class="header1_1">设置<li>
</ul>
</div>
<div style="height:40px; background:#01204F; position:relative; top:30px">
<ul style="position:absolute; left:150px;">
<li class="header2">首页</li>
<li class="header2">国内</li>
<li class="header2">国际</li>
<li class="header2">军事</li>
<li class="header2">财经</li>
<li class="header2">娱乐</li>
<li class="header2">体育</li>
<li class="header2">互联网</li>
<li class="header2">科技</li>
</ul>
</div>
<div class="clear"></div>
<div style="height:500px; width:990px; margin:40px auto;">
<div class="box3" >
<ul>
<li>震惊!外星人闯地球 在杭州某地体验共享单车</li>
<li>解密:世界十大第一类接触案</li>
<li>专家:如何判断外星人分属哪个星球</li>
<li>后续:杭州外星人案实为无事闲逛的地球丑B</li>
<li>下面我实在编不下去了</li>
</ul>
</div>
<div class="box3"">
<ul class="clear">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="box3" style="height:250px; width:280px; box-shadow:1px 5px 15px #ccc;">
<form style="text-align:center">
<input type="text" name="uesename" placeholder="秀出你的昵称"><br>
<input type="password" name="pw" placeholder="麻烦密码填一下"><br>
<button>立即登入</button>
</form><br>
<p>制造bug</p><br>
<p>墨池更专业</p>
</div>
<br>
<div style="background:#ccc; height:1px;margin-top:15px;"></div>
</div>
</body>
</html>
