在網頁開發中，經常會有將網頁切分爲不同的局部塊，然後再在不同的快中顯示不同的內容，如：頂部塊、主題內容塊、側邊欄信息快、底部信息塊等。
使用DIV可以將網頁切成不同的塊，然後使用CSS樣式表定義各不同塊的具體顯示。一般將div佈局與CSS樣式分不同文件編寫，div切割在html文件中實現，然後將獨立的CSS樣式表文件加載到html文件中。
下面以源代碼及效果圖的方式，展示一個簡單的網頁佈局案例。
最終效果圖：
說明：將網頁分成了上中下三部分，上面頂部（紅色），中間部分（黃色）又分爲左邊的主體內容（藍色）和右邊的側邊欄（灰色）兩個子塊，下面是底部（綠色）。邊緣暗紅色的是背景，背景可以指定顏色或是設置背景圖片。
要想將網頁切割成這樣的塊，需要在html中使用div標籤定義，本例定義塊代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="this is a web station for alone.">
<meta name="keywords" content="perfect,home,blog,web,station">
<title>我的個人站點</title>
<!-- 在html文件中使用link標籤添加爲這個文件定製的CSS樣式表 -->
<link rel="stylesheet" type="text/css" href="myweb.css" />
</head>
<body>
<!-- 定義頂部塊，併爲這個塊設定一個名稱爲head的id值 -->
<div id="head">
<h1>這裏是頂部欄</h1>
</div>
<!-- 定義主體容器塊，併爲這個塊設定一個名稱爲container的id值 -->
<div id="container">
<!-- 在contarner塊中定義兩個子塊，然後分別爲這兩個塊設定名稱爲main、siderbar的class類 -->
<div class="main"><h1>這裏是主體內容部分</h1></div>
<div class="sidebar"><h1>這裏是側邊欄</h1></div>
</div>
<!-- 定義底部塊，併爲這個塊設定一個名稱爲bottom的id值 -->
<div id="bottom"><h1>這裏是底部</h1></div>
</body>
</html>說明：
1.使用上面的代碼，雖然可以將頁面切成不同的塊，但是默認的塊沒有大小、顏色之分，根本看不出來。
2.爲每個div元素設定了一個id或class屬性來標識，每個屬性值代表對應的元素，在CSS樣式表中使用。id值必須唯一，一個id值代表一個元素。但class值可以重複，一個class值表示同名的一類元素。
爲了在網頁中清晰的分辨各塊，需要定義一個CSS樣式表myweb.css來定義不同塊及元素的顯示。
下面的myweb.css文件對上面的html文件裏各部分定義瞭如何顯示：
/*在css文件中，默認的html元素可以直接使用名稱，這裏定義了整個網頁body部分的顏色，
是十六進制的RGB表示方法，即圖片周邊的暗紅色。也可以使用哪個url()的方式爲body部分
設置背景圖片*/
body{
background-color: #551122;
<!-- background-p_w_picpath: url("../bj.jpg");-->
}
/*html元素的id屬性使用#開頭。width、herght表示寬與高，大小使用像素表示。
margin表示顯示方式，默認靠左，auto設置爲居中顯示，並設定背景顏色爲red*/
#head{
width: 960px;
height: 80px;
margin: auto;
background-color: red;
}
#container{
width: 960px;
height: 500px;
margin: auto;
background-color: yellow;
}
/*html元素定義class屬性使用點.開頭。float設置該塊的漂浮屬性，在container內向左移,
另一個快siderbar在container內向右移*/
.main{
float: left;
width: 700px;
height: 500px;
background-color: blue;
}
/*因爲main和siderbar在container內，所以兩個塊的寬度之和不應該超過container的寬度*/
.sidebar{
float: right;
width: 240px;
height: 500px;
background-color: gray;
}
/*底部塊的id值，大小及顏色、居中顯示*/
#bottom{
width: 960px;
height: 100px;
background-color: green;
margin: auto;
}
/*重新定義h1元素的顯示，由於h1默認有邊距margin-top將頂部間距設爲0，
text-align爲設置字體的顯示位置屬性：center是居中顯示，font-size定義大小*/
h1{
margin-top: 0px;
text-align: center;
color: white;
font-size: 35px;
}
/*定義bottom中的h1顯示方式，其他的h1字體顏色爲white，此處h1顏色爲red，大小也改變。
當多處定義了同一個元素時，最精確的生效*/
#bottom h1{
margin-top: 0px;
text-align: center;
color: red;
font-size: 50px;
}說明：
1.在css樣式表中，html的默認元素可以直接使用，元素的id使用“#”+“id值”表示，元素的class使用“.”+“class值”表示；
2.CSS可用的屬性值太多，可以根據手冊查詢，此處只根據需要使用了寬度、高度、顏色、顯示位置等屬性；
3.在html中h1...h7有默認的顯示形式，可以在CSS中改變其顯示屬性，並且可以使用精確定位的方式設置不同地方的h1有不同的顯示。
根據以上內容，就可以使用Div+CSS爲自己的網頁佈局了。