DIV+CSS網頁布局之：一列布局_html/css

1、網頁布局

　　布局（layout）即對事物的全面規劃和安排，頁面布局是對頁面的文字、圖像或表格進行格式化版式排列。網頁布局對改善網站的外觀非常重要，又稱版式布局，大多數網站會把內容安排到多個列中，就像雜志或報紙那樣，網頁版面的設計延續了傳統紙媒的特點，但又比傳統的紙媒更靈活，傳統的紙媒由于紙張大小的限制，只能在有限的空間內排列內容，而網頁版面的布局，可以根據內容自適應寬度和高度。在 HTML 中，常使用 div 元素來創建多列，使用 CSS 對元素進行浮動、定位等，從而將網頁設計稿中的布局樣式呈現在網頁上。網頁布局是網頁制作的基礎，通常使用的方式有三中：流式布局，即元素按照標準文檔流進行排列；浮動布局和絕對定位布局。而在各大網站中，常見的布局結構分為：一列布局，兩列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照網站的實際需求使用多列進行布局。

　　目前，大多數的網站仍采用一套通用的排版模式，頁頭、頁腳、側邊欄和內容區域，構成了這種直截了當的布局。就像傳統的報刊雜志編輯一樣，而這是人們預期中的網頁版面，大致可分為：國字型，即三列布局，最常見的一種布局結構。標題正文型，即單列布局，類似文章頁面。左右框架型，即兩列布局；上下框架型，和兩列布局類似，只不過是上下結構。混合型，即多列布局的結合，多種類型的變化，相對復雜的一種框架結構，也叫綜合框架類型。封面型，常用于網站的首頁，大多數在第一屏放置一張精美的圖片，類似宣傳海報的樣式，再結合一些小的動畫效果，可用于產品的展示，會給人帶來賞心悅目的感覺。

　　隨著 HTML5 和 CSS3 新技術的出現，以及移動設備的飛速發展，互聯網發生了翻天覆地的變化，對于如今來說，布局已不必再拘泥于固定格式。近些年網頁排版設計的趨勢，都是非常規布局，他們并不嚴格遵循某種準則或既定體系。視覺交互方面的，比如全屏布局，瀑布流，無縫拼圖布局等，這些都不局限于傳統的布局方式。而對于傳統類的，信息類的網站大多都采用單列，兩列或三列布局，還有混合布局結構。頁面的布局結構會直接影響頁面的用戶體驗，比如很受歡迎的卡片式網頁設計，不僅外觀漂亮，而且具有很強的實用性，信息和內容高度整合，卻又如此簡單優雅。卡片式設計的流行，離不開響應式設計，響應式網頁設計不僅是創建一個移動端站點，而是使網站適用于各種瀏覽器尺寸，不論是 PC 端、平板還是智能手機，響應式設計的目的，就是創建一個不論大小尺寸都美觀的網站。

　　下面是平時在做練習時，發現的幾個不錯的網頁版面設計：QQ瀏覽器，360瀏覽器，小米手機展示頁，堅果手機展示頁，花瓣網。

　　相對于國內網站的布局結構，還是要多欣賞一些國外的網站設計。

2、一列布局

　　一列布局多用于網站的首頁，比如360搜索，一列布局的結構簡潔明了，主題突出，適合排列簡單的內容，不適合多行內容，通常一列布局都是固定寬度的。

 1 2  3  4  5  6 25 26 27 頁頭28 主體內容29 頁腳30 31 

　　新浪和網易的首頁，就使用了一列布局。

3、單列寬度自適應布局

　　要想寬度自適應，只需要按照百分比來設置寬度，內容就可以根據瀏覽器窗口自動調節大小。

 1 2  3  4  5  6 25 26 27 頁頭28 主體內容29 頁腳30 31 

4、自適應單列布局

　　這種布局結構比較適合密集型內容的網站。

 1 2  3  4  5  6 33 34 35 頁頭36 主體37 內容38 39 頁腳40 41 42 

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com