当前布局由6个等宽行组成，其中第四行有三栏，第五行有四栏。
重点第四行设置：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
height: 100px;
;
}
section#feature_area {
background: #dcd9c0;
}
section#feature_area article {
float: left;
width: 320px;
padding: 10px 0;
background: #fff;
border-top: 4px solid #f7be84;
}
section#feature_area article:nth-child(2) {
background: gold;
}
section#feature_area article .inner {
margin: 10px 20px;
padding: 5px;
background: #fff;
border: 5px solid;
}
section#feature_area article:nth-child(1) .inner {
border-color: #d7dd6f;
}
section#feature_area article:nth-child(2) .inner {
border: 5px solid #f6dec5;
}
section#feature_area article:nth-child(3) .inner {
border-color: #d1d8e4;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>全宽度内容</h1>
</header>
<nav>
<p>导航到菜单</p>
</nav>
<section id="branding">
<img src="./img/charlie.png" alt="查理" />
</section>
<section id="feature_area">
<article>
<div class="inner">
<p>演示文本</p>
</div>
</article>
<article>
<div class="inner">
<p>演示文本</p>
</div>
</article>
<article>
<div class="inner">
<p>演示文本</p>
</div>
</article>
</section>
<section id="promo_area">
<article>
<div class="inner">
<p>演示文本</p>
</div>
</article>
<article>
<div class="inner">
<p>演示文本</p>
</div>
</article>
<article>
<div class="inner">
<p>演示文本</p>
</div>
</article>
<article>
<div class="inner">
<p>演示文本</p>
</div>
</article>
</section>
<footer>
<p>一个CSS模板，<a href="http://www.stylinwithcss.com">
Stylin' with CSS,第三版
</a>作者Charles Wyke-Smith</p>
</footer>
</div>
</body>
</html>小结：hook,路标，钩子，表示代码中一个唯一的参照点，其他代码通过这个参照点可以与相应的代码交互。
