溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了DIV+CSS如何實現一列布局，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1、網頁布局
布局（layout）即對事物的全面規劃和安排，頁面布局是對頁面的文字、圖像或表格進行格式化版式排列。網頁布局對改善網站的外觀非常重要，又稱版式布局，大多數網站會把內容安排到多個列中，就像雜志或報紙那樣，網頁版面的設計延續了傳統紙媒的特點，但又比傳統的紙媒更靈活，傳統的紙媒由于紙張大小的限制，只能在有限的空間內排列內容，而網頁版面的布局，可以根據內容自適應寬度和高度。在 HTML 中，常使用 div 元素來創建多列，使用 CSS 對元素進行浮動、定位等，從而將網頁設計稿中的布局樣式呈現在網頁上。網頁布局是網頁制作的基礎，通常使用的方式有三中：流式布局，即元素按照標準文檔流進行排列；浮動布局和絕對定位布局。而在各大網站中，常見的布局結構分為：一列布局，兩列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照網站的實際需求使用多列進行布局。
目前，大多數的網站仍采用一套通用的排版模式，頁頭、頁腳、側邊欄和內容區域，構成了這種直截了當的布局。就像傳統的報刊雜志編輯一樣，而這是人們預期中的網頁版面，大致可分為：國字型，即三列布局，最常見的一種布局結構。標題正文型，即單列布局，類似文章頁面。左右框架型，即兩列布局；上下框架型，和兩列布局類似，只不過是上下結構。混合型，即多列布局的結合，多種類型的變化，相對復雜的一種框架結構，也叫綜合框架類型。封面型，常用于網站的首頁，大多數在第一屏放置一張精美的圖片，類似宣傳海報的樣式，再結合一些小的動畫效果，可用于產品的展示，會給人帶來賞心悅目的感覺。
隨著 HTML5 和 CSS3 新技術的出現，以及移動設備的飛速發展，互聯網發生了翻天覆地的變化，對于如今來說，布局已不必再拘泥于固定格式。近些年網頁排版設計的趨勢，都是非常規布局，他們并不嚴格遵循某種準則或既定體系。視覺交互方面的，比如全屏布局，瀑布流，無縫拼圖布局等，這些都不局限于傳統的布局方式。而對于傳統類的，信息類的網站大多都采用單列，兩列或三列布局，還有混合布局結構。頁面的布局結構會直接影響頁面的用戶體驗，比如很受歡迎的卡片式網頁設計，不僅外觀漂亮，而且具有很強的實用性，信息和內容高度整合，卻又如此簡單優雅。卡片式設計的流行，離不開響應式設計，響應式網頁設計不僅是創建一個移動端站點，而是使網站適用于各種瀏覽器尺寸，不論是 PC 端、平板還是智能手機，響應式設計的目的，就是創建一個不論大小尺寸都美觀的網站。
下面是平時在做練習時，發現的幾個不錯的網頁版面設計：QQ瀏覽器，360瀏覽器，小米手機展示頁，堅果手機展示頁，花瓣網。
相對于國內網站的布局結構，還是要多欣賞一些國外的網站設計。
2、一列布局
一列布局多用于網站的首頁，比如360搜索，一列布局的結構簡潔明了，主題突出，適合排列簡單的內容，不適合多行內容，通常一列布局都是固定寬度的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一列布局</title>
<style>
*{margin:0;padding:0;}
#header{
height:50px;
background:blue;
}
#main{
width:960px;
height:800px; /* 在實際開發中不設置列的高度，讓高度自適應。 */
background:green;
margin:0 auto;
}
#footer{
width:960px;
height:100px;
background:gray;
margin:0 auto;
}
</style>
</head>
<body>
<div id="header">頁頭</div>
<div id="main">主體內容</div>
<div id="footer">頁腳</div>
</body>
</html>新浪和網易的首頁，就使用了一列布局。
3、單列寬度自適應布局
要想寬度自適應，只需要按照百分比來設置寬度，內容就可以根據瀏覽器窗口自動調節大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一列自適應布局</title>
<style>
*{margin:0;padding:0;}
#header{
height:50px;
background:blue;
}
#main{
width:80%;
height:800px; /* 在實際開發中不設置列的高度，讓高度自適應。 */
background:green;
margin:0 auto;
}
#footer{
width:80%;
height:50px;
background:gray;
margin:0 auto;
}
</style>
</head>
<body>
<div id="header">頁頭</div>
<div id="main">主體內容</div>
<div id="footer">頁腳</div>
</body>
</html>4、自適應單列布局
這種布局結構比較適合密集型內容的網站。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>單列布局</title>
<style>
*{margin:0;padding:0;}
#wrap{
width:80%;
margin:0 auto;
border:2px solid black;
}
#header{
width:100%;
height:100px;
background:blue;
margin-bottom:10px;
}
#main{
width:100%;
margin-bottom:10px;
}
#main .content{
height:500px; /* 在實際開發中不設置列的高度，讓高度自適應。 */
background:yellow;
}
#footer{
width:100%;
height:100px;
background:gray;
}
</style>
<body>
<div id="wrap">
<div id="header">頁頭</div>
<div id="main">主體
<div class="content">內容</div>
</div>
<div id="footer">頁腳</div>
</div>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“DIV+CSS如何實現一列布局”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
