abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hiki</title> <link rel="stylesheet" type="text/css"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hiki</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
*{padding: 0px;margin:0px;} /*清空浏览器自带的边距*/
ul li{list-style: none; width: 100px;height: 30px; line-height: 25px;text-align: center;background-color: #F54343;margin-left: 1px; float:left; font-size: 15px;color: white;}
.box1{width: 606px;height: 600px;background-color: #f0f0f0;float:left;}
.box_right{margin-left: 1px;width: 302px;height: 600px;background-color: #ECECFF;float:left;}
.leftlist{width: 200px;height: 300px;background: #FCFCFC;}
.leftlist2{width: 603px;height: 292px;background: #FCFCFC;margin-top: 3px;}
.clear{clear:both;}
.bannerimg{width: 909px;}
ol li{line-height: 30px;font-size: 12px;}
</style>
</head>
<body>
<ul>
<li>资讯</li>
<li>视频</li>
<li>直播</li>
<li>财经</li>
<li>文化</li>
<li>体育</li>
<li>文化</li>
<li>时尚</li>
<li>汽车</li>
</ul>
<div class="clear"></div>
<div class="banner">
<img class="bannerimg" src="https://c1.ifengimg.com/iamsImg/2018/11/26/e68ba19f4267288785f6d6ec86dd8a87_w1000_h90.jpg">
</div>
<div>
<div>
<h4 style="text-align: center;">最新快讯</h4>
<ol>
<li>华为CFO孟晚舟获得保释</li>
<li>法官：逮捕孟女士是基于美国</li>
<li>Facebook总部大楼因炸弹威胁被疏散</li>
<li>大道致远，“一带一路”倡议5周年</li>
<li>中国男子在靖国神社烧报纸 抗议</li>
<li>华为：期待美加能及时公正结束事件</li>
<li>孟晚舟当庭落泪 与律师等人拥抱</li>
<li>40年减贫7.4亿人 这个民主很有范儿</li>
<li>搜索“蠢货”却出现特朗普 谷歌CEO</li>
</ol>
</div>
<div class="leftlist2">
</div>
</div>
<div class="box_right"></div>
</body>
</html>效果图：
Correcting teacher：天蓬老师Correction time：2018-12-12 11:59:02
Teacher's summary：浮动主要是用在图文混排中, 在布局中,能不用就不要用,首选绝对定位