1、網頁布局
布局（layout）即對事物的全面規划和安排，頁面布局是對頁面的文字、圖像或表格進行格式化版式排列。網頁布局對改善網站的外觀非常重要，又稱版式布局，大多數網站會把內容安排到多個列中，就像雜志或報紙那樣，網頁版面的設計延續了傳統紙媒的特點，但又比傳統的紙媒更靈活，傳統的紙媒由於紙張大小的限制，只能在有限的空間內排列內容，而網頁版面的布局，可以根據內容自適應寬度和高度。在 HTML 中，常使用 div 元素來創建多列，使用 CSS 對元素進行浮動、定位等，從而將網頁設計稿中的布局樣式呈現在網頁上。網頁布局是網頁制作的基礎，通常使用的方式有三中：流式布局，即元素按照標准文檔流進行排列；浮動布局和絕對定位布局。而在各大網站中，常見的布局結構分為：一列布局，兩列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照網站的實際需求使用多列進行布局。
目前，大多數的網站仍采用一套通用的排版模式，頁頭、頁腳、側邊欄和內容區域，構成了這種直截了當的布局。就像傳統的報刊雜志編輯一樣，而這是人們預期中的網頁版面，大致可分為：國字型，即三列布局，最常見的一種布局結構。標題正文型，即單列布局，類似文章頁面。左右框架型，即兩列布局；上下框架型，和兩列布局類似，只不過是上下結構。混合型，即多列布局的結合，多種類型的變化，相對復雜的一種框架結構，也叫綜合框架類型。封面型，常用於網站的首頁，大多數在第一屏放置一張精美的圖片，類似宣傳海報的樣式，再結合一些小的動畫效果，可用於產品的展示，會給人帶來賞心悅目的感覺。
隨着 HTML5 和 CSS3 新技術的出現，以及移動設備的飛速發展，互聯網發生了翻天覆地的變化，對於如今來說，布局已不必再拘泥於固定格式。近些年網頁排版設計的趨勢，都是非常規布局，他們並不嚴格遵循某種准則或既定體系。視覺交互方面的，比如全屏布局，瀑布流，無縫拼圖布局等，這些都不局限於傳統的布局方式。而對於傳統類的，信息類的網站大多都采用單列，兩列或三列布局，還有混合布局結構。頁面的布局結構會直接影響頁面的用戶體驗，比如很受歡迎的卡片式網頁設計，不僅外觀漂亮，而且具有很強的實用性，信息和內容高度整合，卻又如此簡單優雅。卡片式設計的流行，離不開響應式設計，響應式網頁設計不僅是創建一個移動端站點，而是使網站適用於各種瀏覽器尺寸，不論是 PC 端、平板還是智能手機，響應式設計的目的，就是創建一個不論大小尺寸都美觀的網站。
下面是平時在做練習時，發現的幾個不錯的網頁版面設計：QQ瀏覽器，360瀏覽器，小米手機展示頁，堅果手機展示頁，花瓣網。
相對於國內網站的布局結構，還是要多欣賞一些國外的網站設計。
2、一列布局
一列布局多用於網站的首頁，比如360搜索，一列布局的結構簡潔明了，主題突出，適合排列簡單的內容，不適合多行內容，通常一列布局都是固定寬度的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>一列布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #header{ 9 height:50px; 10 background:blue; 11 } 12 #main{ 13 width:960px; 14 height:800px; /* 在實際開發中不設置列的高度，讓高度自適應。 */ 15 background:green; 16 margin:0 auto; 17 } 18 #footer{ 19 width:960px; 20 height:100px; 21 background:gray; 22 margin:0 auto; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="header">頁頭</div> 28 <div id="main">主體內容</div> 29 <div id="footer">頁腳</div> 30 </body> 31 </html>
新浪和網易的首頁，就使用了一列布局。
3、單列寬度自適應布局
要想寬度自適應，只需要按照百分比來設置寬度，內容就可以根據瀏覽器窗口自動調節大小。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>一列自適應布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #header{ 9 height:50px; 10 background:blue; 11 } 12 #main{ 13 width:80%; 14 height:800px; /* 在實際開發中不設置列的高度，讓高度自適應。 */ 15 background:green; 16 margin:0 auto; 17 } 18 #footer{ 19 width:80%; 20 height:50px; 21 background:gray; 22 margin:0 auto; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="header">頁頭</div> 28 <div id="main">主體內容</div> 29 <div id="footer">頁腳</div> 30 </body> 31 </html>
4、自適應單列布局
這種布局結構比較適合密集型內容的網站。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>單列布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #wrap{ 9 width:80%; 10 margin:0 auto; 11 border:2px solid black; 12 } 13 #header{ 14 width:100%; 15 height:100px; 16 background:blue; 17 margin-bottom:10px; 18 } 19 #main{ 20 width:100%; 21 margin-bottom:10px; 22 } 23 #main .content{ 24 height:500px; /* 在實際開發中不設置列的高度，讓高度自適應。 */ 25 background:yellow; 26 } 27 #footer{ 28 width:100%; 29 height:100px; 30 background:gray; 31 } 32 </style> 33 <body> 34 <div id="wrap"> 35 <div id="header">頁頭</div> 36 <div id="main">主體 37 <div class="content">內容</div> 38 </div> 39 <div id="footer">頁腳</div> 40 </div> 41 </body> 42 </html>