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

知识点：网页布局的方式

1、网页布局

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

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

 

2、DIV+CSS布局

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

第一步：将页面在整体上用

标签进行划分。

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

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

2.2 常用布局的实现

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

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

 


    
一栏式固定宽度且居中
    

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

 

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

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

 



	
二栏式固定宽度且居中-left
	
	
二栏式固定宽度且居中-right
	

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

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

 

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

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

 





	
三栏式固定宽度且居中-左
	
三栏式固定宽度且居中-中
	
三栏式固定宽度且居中-右

 

4、一栏式自适应布局

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

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

 

5、二栏式自适应布局

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

 



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

 

3、框架布局

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

 

3.1 框架结构标签

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

基本语法：

    
    浏览器不支持框架时的显示内容

注意：