DIV+CSS网页布局实例_divcss布局经典实例

一、效果预览

说明：非常基础的IDV+CSS，实现了一般网站布局。CSS样式也比较基础，一些像定位等属性都没有使用。

二、代码实现

1、主体结构
（1）标签结构

（2）容器样式

2、头部
（1）头部标签

（2）头部样式、

3、导航
（1）标签结构

（2）CSS样式

4、主体
（1）主体标签

<!-- 主体 -->
		<div class="middle">
			<!-- 主体左栏 -->
			<div class="middle-left">
				<div class="middle-left-top">
					第一栏
				</div>
				<div class="middle-left-bottom">
					<div class="middle-left-bottom-first">
						第二栏
					</div>
					<div class="middle--left-bottom-second">
						第三栏
					</div>
				</div>
			</div>
			<!-- 主体中栏 -->
			<div class="middle-mid">
				<div class="middle-mid-top">
					第四栏
				</div>
				<div class="middle-mid-bottom">
					<div class="middle-mid-bottom-first">
						第五栏
					</div>
					<div class="middle-mid-bottom-second">
						第六栏
					</div>
				</div>
			</div>
			<!-- 主体右栏 -->
			<div class="middle-right">
				<div class="middle-right-first">
					第七栏
				</div>
			
				<div class="middle-right-second">
					第八栏
				</div>
				<div class="middle-right-third">
					第九栏
				</div>
		
			</div>
		</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

（2）主体样式

		/*主体样式*/
		.middle{
			background-color:lightgreen;
		}
		.middle::after{
			content:"";
			clear: both;
			display: block;
		}


		.middle-left,.middle-mid,.middle-right{
			width:390px;
			float: left;
			border:1px solid red;
		}
		.middle-left,.middle-mid{
			margin-right: 10px;
		}

		.middle-left{
			background-color: green;
		}
		.middle-mid{
			background-color: blue;
		}
		.middle-right{
			background-color: yellow;
		}
		
		/*主体左栏样式*/
		.middle-left-bottom::after{
			content:"";
			clear: both;
			display: block;
		}
		.middle-left-bottom-first,.middle--left-bottom-second{
			float: left;
			margin:10px;
			border:1px solid red;
			width:160px;

		}
		.middle-left-bottom-first,.middle--left-bottom-second{
			height:200px;
			background-image: url(./image/mid-left-bottom.jpg);
		}
		.middle-left-top{
			margin:10px;
			height:100px;
			background-image: url(./image/mid-left-top.jpg);
		}
		/*主体中栏样式*/
		.middle-mid-bottom-first,.middle-mid-bottom-second{
			float: left;
			margin:10px;
			border:1px solid red;
			width:160px;
			height:200px;
			background-image: url(./image/mid-left-bottom.jpg);
		}
		.middle-mid-top{
			margin:10px;
			height:100px;
			background-image: url(./image/mid-left-top.jpg);
		}

		/*主体右栏样式*/
	
		.middle-right::after{
			content:"";
			clear: both;
			display: block;
		}
		.middle-right-first{
			margin:10px;
			height:100px;
			background-image: url(./image/mid-left-top.jpg);
		}
		.middle-right-second,.middle-right-third{
			float: left;
			margin:10px;
			border:1px solid red;
			width:160px;
			height:200px;
			background-image: url(./image/mid-left-bottom.jpg);
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

5、底部
（1）标签结构

<!-- 底部 -->
		<div class="footer">
			<img src="./image/footer.jpg" alt="">
		</div>
1
2
3
4

（2）底部样式

/*底部样式*/
		.footer{
			background-image: url(./image/footer.jpg);
		}
1
2
3
4

布局前划分结构非常重要，这样就不容易造成混乱。这样我们就实现了一个非常简单的DIV+CSS网页结构布局。