DIV+CSS 網頁佈局之：一列布局

時間 2019-12-04

標籤 div+css div css 網頁佈局一列欄目 HTML 简体版

原文原文鏈接

一、網頁佈局

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

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

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

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

　　相對於國內網站的佈局結構，仍是要多欣賞一些國外的網站設計。動畫

二、一列布局

　　一列布局多用於網站的首頁，好比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>

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

三、單列寬度自適應佈局

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

 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>

四、自適應單列布局

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

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。