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