SOURCE

<div class="header">
	<div class="h1">250*100</div>
	<div class="h2">150*50</div>
	<div class="h3">650*50</div>
</div>
<div class="content">
	<div class="aside">320*400</div>
	<div class="article">
		<div class="articleTop">
			<div class="articleTopLeft">
				<div class="crtl1">400*200</div>
				<div class="crtl2">400*140</div>
			</div>
			<div class="articleTopRight">
                240*350
			</div>
		</div>
		<div class="articleBottom">650*40</div>
	</div>
</div>
<div class="footer">980*40</div>

div {
    text-align: center;
}

.header {
    width: 980px;
    height: 100px;
    margin: 0 auto;
}

.header .h1 {
    background: pink;
    width: 250px;
    height: 100px;
    float: left;
}

.header .h2 {
    background: skyblue;
    width: 150px;
    height: 50px;
    float: right;
}

.header .h3 {
    background: purple;
    width: 650px;
    height: 50px;
    float: right;
}

.content {
    width: 980px;
    height: 400px;
    margin: 0 auto;
    margin-top: 10px;
}

.content .aside {
    width: 320px;
    height: 400px;
    background: yellow;
    float: left;
}

.content .article {
    width: 650px;
    height: 400px;
    float: right;
}

.content .article .articleTop {
    width: 650px;
    height: 350px;
}

.content .article .articleBottom {
    width: 650px;
    height: 40px;
    background-color: darkgoldenrod;
    margin-top: 10px;
}

.content .article .articleTop .articleTopLeft {
    float: left;
}

.content .article .articleTop .articleTopLeft .crtl1 {
    width: 400px;
    height: 200px;
    background-color: rebeccapurple;
}

.content .article .articleTop .articleTopLeft .crtl2 {
    width: 400px;
    height: 140px;
    background-color: lightskyblue;
    margin-top: 10px;
}

.content .article .articleTop .articleTopRight {
    width: 240px;
    height: 350px;
    background: yellowgreen;
    float: right;
}

.footer {
    width: 980px;
    height: 40px;
    background-color: orange;
    margin: 0 auto;
    margin-top: 10px;
}