頭部區域位于整個網頁的頂部，一般用于設置網頁的標題或者網頁的LOGO：我們將創建一個3列布局，在小的屏幕上將會變成1列布局（響應式）：提示:現在更高級的方式是使用CSSFLEXBOX來創建列的布局，但INTERNETEXPLORER10及更早的版本不支持該方式，IE6-10可以使用浮動方式。CSSFLEXBOX的更多內容可以查看CSS3彈性盒子(FLEXBOX)。不相等的列一般是在中間部分設置內容區域，這塊也是最大最主要的，左右兩次側可以作為一些導航等相關內容，這三列加起來的寬度是100％。底部區域在網頁的最下方，一般包含版權信息和聯系方式等。通過以上等學習我們來創建一個響應式等頁面，頁面的布局會根據屏幕的大小來調整：
