知识点：网页布局的方式

1、网页布局

常见的页面布局方式：表格布局、DIV+CSS布局、框架布局。

表格布局：用来显示较多的数据，如OA系统、ERP系统或CRM系统。（一般用在局部）
DIV+CSS布局：相对来说最灵活的布局方式，完全实现内容和样式的分离。
框架布局：通常用在网站后台的设计。

2、DIV+CSS布局

2.1 使用DIV+CSS制作网页流程

第一步：将页面在整体上用<div>标签进行划分。

第二步：使用CSS对个版块进行定位。（初学者可以给各版块添加背景颜色，帮助查看效果）

第三步：在各版块中ti添加相应的内容，实现局部布局。

2.2 常用布局的实现

1、一栏式固定宽度且居中

一栏式布局是所有布局的基础。大多数的页面，无论结构是简单还是复杂，都是在一栏式布局的基础上，再进行进一步的划分。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一栏式固定宽度且居中</title>
<style type="text/css">
#div1{ 
	width:800px;/*设置div的宽度*/
	height:300px;/*设置div的高度，实际制作网页中可以让高度自适应内容。或者根据内容人工调整高度值*/
	background-color:#F9C;/*设置背景颜色，帮助制作者查看div的位置，网页制作完成后，可以删除背景颜色*/
	margin:0px auto;/*设置外边距上下0px，左右auto，即可实现左右居中的效果*/
}

</style>
</head> 

<body>
    <div id="div1">一栏式固定宽度且居中
    </div>
</body>
</html>

注意：几乎所有的页面设计的整体效果都是采用一栏式固定宽度居中，然后再在固定宽度的盒子内进行布局，其原因在于设置的种类太多，很难兼顾到所有的屏幕分辨率，采用固定宽度来适配最常用的屏幕分辨率，可以在保证效果的情况下大大的减少工作量和降低工作难度。

2、二栏式固定宽度且居中

二栏式布局时，一般来说左右两栏会有一栏较窄，用于放置次要信息，一栏较宽，用于放置主要信息。可以是左宽右窄，也可以是右宽左窄，当然也可以左右宽度一致。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二栏式固定宽度且居中</title>
<style type="text/css">
#div1{ 
	width:800px;
	height:300px;
	border:2px solid red;
	margin:0px auto;/*设置外边距上下0px，左右auto，即可实现左右居中的效果*/
}
#left {
	width:300px;
	height:300px;/*left的高度也是300px，但是却超出了父级元素的高度，为什么？*/
	border:1px solid #FF0;
	background-color:#0FF;
	}
#right {
	padding:10px;
	margin-left:20px;	
	width:458px;/*父级元素宽800px，left元素宽300px，right元素的宽度为什么不是500px？*/
	height:200px;
	background-color:#F66;
	}
#left,#right { float:left;}
</style>
</head> 

<body>
<div id="div1">
	<div id="left">二栏式固定宽度且居中-left
	</div>
	<div id="right">二栏式固定宽度且居中-right
	</div>
</div>
</body>
</html>

注意：多栏式布局，要实现居中，可以先做一个父级元素，让父级元素居中。然后在父级元素里添加对应的盒子即可。

多栏式布局，还需要考虑多个盒子之间的宽度、margin、padding等数值的影响，需要精确计算。

3、三栏式固定宽度且居中

通常用一个宽列放置主要内容，两个窄列放置导航链接等内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三栏式固定宽度且居中</title>
<style type="text/css">
#div1{ 
	width:800px;
	height:300px;
	border:2px solid red;
	margin:0px auto;/*设置外边距上下0px，左右auto，即可实现左右居中的效果*/
}
#left,#middle,#right {
	float:left;
	border:1px dashed #000;
	margin:10px;
	height:200px;
	}
#left{
	width:100px;
	background-color:#F9F;
	}
#middle {
	width:434px;
	background-color:#3FC;
	}
#right {
	width:200px;
	background-color:#93C;
	}
</style>
</head> 


<body>

<div id="div1">
	<div id="left">三栏式固定宽度且居中-左</div>
	<div id="middle">三栏式固定宽度且居中-中</div>
	<div id="right">三栏式固定宽度且居中-右</div>

</div>

</body>
</html>

4、一栏式自适应布局

自适应布局能够根据浏览器窗口的大小，自动改变页面宽度或高度，相对于浏览器窗口保持一定的比例。是一种非常灵活的布局形式。自适应布局大多数使用百分比值作为参数的样式属性，width宽度属性也不例外。

方法：将盒子的宽度由固定值改为百分比即可。

5、二栏式自适应布局

一般将较窄的一栏宽度设为固定值，并设置浮动方向，较宽的一栏不设置宽度，即宽度自适应，铺满剩余的部分，用于显示内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二栏式自适应布局</title>
<style type="text/css">
#div1{ 	
	background-color:#FFC;
	overflow:hidden;/*清除浮动塌陷*/	
      }
#left {
	width:100px;/*将较窄的盒子设定固定宽度*/
	float:left;/*设置盒子向左浮动*/
	height:300px;
	background-color:#0FF;
	}
#right {/*较宽的列不设置宽度，让其自适应宽度*/
	margin-left:110px;/*设置盒子左外边距110px=左侧盒子的宽度+适当的边距*/
	height:200px;
	background-color:#F66;
	}
</style>
</head> 

<body>
<div id="div1">
	<div id="left">二栏式自适应布局-left
	</div>
	<div id="right">二栏式自适应布局-right-较宽的一列不需要设置宽度，自适应宽度。同时设置左外边距，左外边距=左侧列表的固定宽度值+一定的外边距
	</div>
</div>
</body>
</html>

3、框架布局

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

3.1 框架结构标签

框架包含<frameset>和<frame>两个标签，其中<frameset>描述窗口的分割，<frame>定义放置在每个框架中的HTML页面。

基本语法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>框架布局</title>
</head>

<frameset 属性="属性值">
    <frame src="HTML页面路径" />
    <noframes>浏览器不支持框架时的显示内容</noframes>
</frameset>

</html>

注意：

HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局