DIV+CSS网页布局实例

客官°小女子只卖身不卖艺 2022-03-07 11:18 556阅读 0赞

## 一、效果预览 ##

说明：非常基础的IDV+CSS，实现了一般网站布局。CSS样式也比较基础，一些像定位等属性都没有使用。  
![在这里插入图片描述][20190316205118966.gif]

## 二、代码实现 ##

**1、主体结构**  
（1）标签结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]  
（2）容器样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]  
2、**头部**  
（1）头部标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]  
（2）头部样式、  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]  
**3、导航**  
（1）标签结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 4]  
（2）CSS样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]  
**4、主体**  
（1）主体标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]

<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）主体样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 7]

/*主体样式*/
    		.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网页结构布局。

[20190316205118966.gif]: /images/20220307/44e8cf4bb0004a10815f51712e111947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: /images/20220307/71884329293d412bb9ed495e1ec56168.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]: /images/20220307/ec8658f0fdb94102b4c04f2cb6f7c9dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]: /images/20220307/cdefb462a2d149af8e7cfd8c468bc81f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]: /images/20220307/3cc217044c504e808cef138fecc1ea3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 4]: /images/20220307/850c2a124642430ea78de04ae3849eb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]: /images/20220307/c24df443e4004662aa291653ba97d5ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]: /images/20220307/2966db68ece94302972567920fd7942c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 7]: /images/20220307/98338c8a4a194211a1626237da48049c.png