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>財(cái)經(jīng)</li>
<li>文化</li>
<li>體育</li>
<li>文化</li>
<li>時(shí)尚</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>法官：逮捕孟女士是基于美國(guó)</li>
<li>Facebook總部大樓因炸彈威脅被疏散</li>
<li>大道致遠(yuǎn)，“一帶一路”倡議5周年</li>
<li>中國(guó)男子在靖國(guó)神社燒報(bào)紙 抗議</li>
<li>華為：期待美加能及時(shí)公正結(jié)束事件</li>
<li>孟晚舟當(dāng)庭落淚 與律師等人擁抱</li>
<li>40年減貧7.4億人 這個(gè)民主很有范兒</li>
<li>搜索“蠢貨”卻出現(xiàn)特朗普 谷歌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：浮動(dòng)主要是用在圖文混排中, 在布局中,能不用就不要用,首選絕對(duì)定位