第九章DIV+CSS布局

9.1 DIV+CSS概述
DIV+CSS是Web设计标准，它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同，它可以实现网页页面内容与表现相分离。DIV组成了网页的格局，CSS则装饰了格局，比如建一栋房子，开始的架子是DIV，架子搭建好后开始装饰，这个装饰就是CSS样式。使用了DIV+CSS布局的网页，它使HTML语言变得越来越复杂化、专用化源码容易扩展，并且更加规整

9.1.1 认识DIV
div标签在 Web标准的网页中使用非常频繁，属于块状元素。div 标签是双标签，即以

的形式存在，中间可以放置任何内容，包括其他的 div 标签。但是在没有 CSS 的影响下，每个 div 标签只占据一行，即一行只能容纳一个 div 标签。

	
		
		
		
	
	
		
设置宽高
		
百分比设置宽高
	

9.1.2 DIV的宽高设置

9.1.2.1 宽高属性
对div设置宽高样式，即div宽度和高度同时设置
1.宽高属性
宽度:width
width:250px--设置宽值为 250 像素。
width:50%--设置宽值为父元素的百分之五十。
高度:height
height:250px--设置高值为250像素。
height:50%--设置高值为父元素的百分之五十。

9.1.2.2 div标签内直接设置宽高
div直接应用CSS

	
		
		
		
	
	
		
设置宽高
		
百分比设置宽高
	

9.1.2.3 div使用选择器设置宽高

把 CSS 样式改为选择器形式。

	
		
		
		
	
	
		
设置宽高
		
百分比设置宽高
		
DIV元素
	

1. 9.1.2.4 div高度的百分比设置问题

   如果div的宽度设置了百分比，则相对其父元素相应改变宽度。但是div的高度则无法根据百分比相应改变。

   
   
   	
   		
   		
   		
   	
   	
   		
   设置宽高
   		
   百分比设置宽高
   		
   DIV元素百分比设置
   	
   

   9.2 DIV+CSS的应用
   标准流(normalfow)也叫常规流，文档流。在使用div、span、p标签进行布局时，默认就是使用标准流进行布局。标准流是垂直布局，是由块元素及其行内元素构成的。从上到下、从左到右按顺序摆放好，默认情况下，互相之间不存在层叠现象。

   
   9.2.1 DIV元素的布局技巧
   由于用户的计算机显示屏分辨率不同，因此在布局页面时，要充分考虑页面内容的布局宽度情况，并保证页面整体内容在页面居中。一旦内容宽度超过显示宽度，页面将出现水平滚动条。应尽量保证网页只有垂直滚动条，才符合用户的习惯，所以高度不需要考虑，一般都是由页面内容决定网页高度即可。

   又因为浏览器的兼容情况，所以在布局页面前，设计者一定要把页面的默认边距清除传统的表格布局时，可以使用属性“align:center;”设置表格居中问题，但是DIV的居中是没有属性可以设置的，只能通过CSS样式控制其位置。
   使 div 元素水平居中的方法有多种，常用的方法是用CSS设置div的左右边距。

   
   
   	
   		
   		
   		
   	
   	
   		
   设置宽高
   		
   百分比设置宽高
   		
   DIV元素居中
   	
   

   9.2.2 DIV元素的宽度自适应

   有时会用到浮动效果，实现DIV元素的宽度自适应。宽度自适应是指两个并排的div其中左边的 div为固定宽度，右边div则根据浏览器的宽度自动调整，这种用法常用于文章列表和文章内容的页面布局。

2.  

   
   
   	
   		
   		
   		
   	
   	
   		
   设置宽高
   		
   百分比设置宽高
   		
   DIV元素居中
   		
   
   			
   左边固定宽度
   			
   右边宽度自适应
   		
   	
   

   9.2.3 DIV内容的居中

   平时说的 div内容居中，只是保持 div内容的水平居中。但是很多网站需要用到的是水平和垂直居中。这里用行高(line-height)属性来实现，当行高的值等于容器的高度值，内容便垂直居中。

   
   
   	
   		
   		
   		
   	
   	
   		
   DIV内容居中
   	
   

   9.2.4 DIV元素的嵌套
   传统的表格布局中，搜索引擎如果遇到多层表格嵌套时，可能抓取不到3层以上的内容，或者会跳过嵌套的内容直接放弃整个页面。
   而DIV+CSS布局则不会存在这样的问题，为了实现复杂的布局结构，div元素也需要互相嵌套。但在布局页面时尽量少嵌套，否则将影响浏览器对代码的解析速度。

   
   
       
           
           
           
       
       
           

   
               

   
               

   
                   

   
                   

   
               

   
               

   
           
   
       
   

   9.3 DIV+CSS的典型布局
   设计者为了让页面外观与结构分离，就要用CSS样式来规范布局。使用CSS样式可以计代码更加简洁和结构化，使站点的访问和维护更加容易。
   网页设计的第一步是版面布局的设计。通过前面的学习，我们已经对页面布局的技巧有基本理解。本节将结合前面知识，展示目前较为常用的CSS布局样式。

   
   9.3.1 左中右布局
   左中右布局在网页设计时最为常用，即div-lef是导航菜单，div-main是视觉集中点，放置主要内容，div-right是表单或链接等。而左中右三个区域一并被包含在一个大的 div-all中。

   
   
   	
   		
   		
   		
   	
   	
   		
   
   			
   导航菜单
   			
   视觉集中区域，主要内容
   			
   表单或链接
   		
   	
   

   9.3.2 上中下布局

   上中下布局符合许多网站共同的特点，即div-top是导航或者横幅广告、dinv-main是视觉集中点，放置主要内容，div-footer 是版权信息等。而上中下三个区域一并被包含在一个大的 div-all中。

3.  

   
   
   	
   		
   		
   		
   	
   	
   		
   
   			
   导航或者横幅广告
   			
   			
   视觉集中区域，主要内容
   			
   			
   版权信息
   		
   	
   

   9.3.3 混合布局

   在了解左中右和上中下布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局。混合布局可以在一列或一行布局的基础之上，分为多列或多行布局。网页布局的结构普遍都是三列布局，或者可以根据实际需求，对网页再进行划分。图9-13所示，就是常见的混合布局。

   
   
       
           
           
           
       
       
           

   
               

   
               
               

   
                   
                   

   
                   

   
                   

   
                   

   
               
               

   
           
   
       
   9.4 综合案例——众成远程教育

   
   
   	
   		
   		
   		
   	
   	
   		
   
   			
   
   				
   			
   			
   
   				
   
   					
   
   					
   
   					
   
   					
   
   					
   相关信息
   					4 大学里提升方案
   
   					新报考政策解读击
   
   					6 大类专业报考指南
   
   					更多信息请点击
   				
   				
   
   					
   入学报名表
   					
   
   						
   
   							
   
   								
   姓名：
   								
   								
   
   								
   							
   							
   
   								
   联系电话：
   								
   								
   
   								
   							
   							
   
   								
   邮箱：
   								
   								
   
   								
   							
   							
   
   								
   资料邮寄地址：
   								
   								
   
   								
   							
   							
   
   								
   最该学历：
   								
   								
   
   									
   										大学本科
   										大专
   										高中
   										初中
   										小学
   									
   								
   							
   							
   
   							
   选择的课程：
   							
   							
   
   							
   							
   							
   
   								
   意向学习方式：
   								
   								
   								
   
   									
   										网络授课
   										周末班
   										全日制
   									
   								
   							
   							
   
   								
   
   									
   								
   							
   						
   					
   				
   				
   
   					
   					
   					
   					
   				
   			
   			
   
   				免费电话:400-XXX-XXX(18 条线)||
   				(北京校区)北京路XX大厦一楼 0000号;||
   				(上海校区)上海路XX科技园7栋 9999 号
   
   				此网站信息最终解释权©众成远程教育
   			
   		
   	
   

   *{
   	margin: 0px auto;
   }
   .all{
   	width: 1000px;
   	height: 840px;
   	background-image: url("../img/img1/9-bg.jpg");
   }
   .top{
   	width: 1000px;
   	height: 150px;
   }
   .main{
   	background-color: aliceblue;
   	width: 1000px;
   	height: 630px;
   }
   .left{
   	padding-top: 30px;
   	padding-left: 20px;
   	width: 200px;
   	height: 570px;
   	float: left;
   	line-height: 60px;
   }
   .center{
   	border-left: 2px dashed blue;
   	border-right: 2px dashed blue;
   	padding-top: 50px;
   	width: 500px;
   	height: 580px;
   	float: left;
   }
   .right{
   	padding-left: 20px;
   	width: 250px;
   	height: 630px;
   	float: left;
   }
   .footer{
   	width: 1000px;
   	height: 60px;
   	font-family: "楷体";
   	font-size: 18px;
   	text-align: center;
   	line-height: 30px;
   }
   a,span{
   	color: red;
   	font-weight: 700;
   	text-align: center;
   }
   p{
   	font-family: "黑体";
   	font-weight: 700;
   	color: brown;
   	font-size: 28px;
   	text-align: center;
   }
   table{
   	font-family: "黑体";
   	font-weight: 700;
   	color: blue;
   	font-size: 20px;
   	line-height: 55px;
   }