<html lang="en">
<head>
<meta charset="UTF-8">
<title>GIS楓</title>
設置DIV樣式
<style>
body {margin: 0; padding: 0;}
.Header{ margin: 0 100px; height: 120px; background-color: #369;}
.Header1, .Header2 ,.Header3, .Header4{height: 30px;}
.Header2 {background-color: blue;}
.Header3 {background-color: yellow;}
.Header4 {background-color: red;}
.Header1 {background-color: orange;}
.Footer { margin: 0 100px; height: 70px; background-color: #369;}
.Left, .Right {
position: absolute;
top: 120px;
width: 100px;
height: 300px;
background-color: pink;
}
.Left {left: 0;}
.Right {right: 0;}
.Cont {margin: 0 100px;}
.con1, .con2 {height: 150px;}
.con1 {background-color: silver;}
.con2 {background-color: slateGrey;}
.Head1,.Head2{
position: absolute;
top: 0px;
width: 100px;
height: 120px;
background-color: silver;
}
.Head1{left:0;}
.Head2{right: 0;}
.Head3,.Head4{
position: absolute;
top: 420px;
width: 100px;
height: 70px;
background-color: pink;
}
.Head3{left: 0;}
.Head4{right: 0;}
</style>
</head>
<body>
<div class="Head1"> Head1</div>
<div class="Header">
<div class="Header1">Header1</div>
<div class="Header2">Header2</div>
<div class="Header3">Header3</div>
<div class="Header4">Header4</div>
</div>
<div class="Head2"> Head2</div>
<div class="Left">Left</div>
<div class="Cont">
<div class="con1">con1</div>
<div class="con2">con2</div>
</div>
<div class="Right">Right</div>
<div class="Footer">Footer</div>
<div class="Head4"> Head4</div>
<div class="Head3"> Head3</div>
</body>
</html>
效果如下圖：
DIV的常用屬性：
1、margin:用於設置DIV的外延邊距，也就是到父容器的距離。margin:后面跟有四個距離分別為到父容器的上-右-下-左邊的距離；margin: [top][right][bottom][left]
2、Height:設置DIV的高度；Width:設置DIV的寬度。
3.background:設置DIV的背景樣式；background后可直接跟背景的顏色、背景圖片、平鋪方式等樣式。也可以用以下屬性分別設置。
4、position:設置DIV的定位方式。position的屬性中有static、fixed、relative、absolute四個屬性。常用relative和absolute。若指定為static時，DIV遵循HTML規則；若指定為relative時，可以用top、left、right、bottom來設置DIV在頁面中的偏移（相對於自身的偏移），但是此時不可使用層；若指定為absolute時，可以用top、left、right、bottom對DIV進行絕對定位（對自己最近的父級元素）；若指定為fixed時，在IE7與FF中DIV的位置相對於屏屏固定不變，IE6中沒有效果（不知為什么）。