效果：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人民网框架实现</title>
<style type="text/css">
body{ margin:0; }
.w1000{ width: 1000px; margin:0 auto; margin-top:10px;}
.cl{ clear: both; }
.fl{ float: left; }
.redBg{ background: red; }
.blueBg{ background: blue; }
.top{ height: 100px; }
.nav1{ height: 50px; }
.nav_main{ height: 150px; width: 100% !important;}
.ad .ad_left{ width: 750px; height: 200px;}
.ad .ad_right{ width: 240px; margin-left:10px; height: 200px;}
.smallTop .smallTop_left{width: 750px; height: 80px; }
.smallTop .smallTop_right{width: 240px;margin-left:10px; height: 80px; }
.bigTop .bigTop_left{width: 200px;height: 60px; }
.bigTop .bigTop_right{width: 790px;margin-left:10px; height: 60px; }
.bigPic .bigPic_left{width: 750px; height: 400px; }
.bigPic .bigPic_right{width: 240px;margin-left:10px; height: 400px; }
</style>
</head>
<body>
<div class="top w1000 blueBg"></div>
<div class="nav1 w1000 blueBg"></div>
<div class="nav_main w1000 redBg"></div>
<div class="nav1 w1000 blueBg"></div>
<div class="nav1 w1000 blueBg"></div>
<div class="ad w1000">
<div class="ad_left fl blueBg"></div>
<div class="ad_right fl blueBg"></div>
<div class="cl"></div>
</div>
<div class="smallTop w1000">
<div class="smallTop_left fl blueBg"></div>
<div class="smallTop_right fl blueBg"></div>
<div class="cl"></div>
</div>
<div class="bigTop w1000">
<div class="bigTop_left fl blueBg"></div>
<div class="bigTop_right fl redBg"></div>
<div class="cl"></div>
</div>
<div class="bigPic w1000">
<div class="bigPic_left fl redBg"></div>
<div class="bigPic_right fl blueBg"></div>
<div class="cl"></div>
</div>
</body>
</html>