DIV+CSS网页布局实例

一、效果预览

说明：非常基础的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>

（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);
		}

5、底部
（1）标签结构

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

（2）底部样式

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

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