当前布局由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,路标，钩子，表示代码中一个唯一的参照点，其他代码通过这个参照点可以与相应的代码交互。
