CSS布局和兼容

布局和兼容

版心和布局流程 通栏

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

一、布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面结构。（从上往下------>每行划分)

3、制作HTML结构 。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

目录说明：

要实现结构和样式相分离的设计思想，根目录下有这4个文件（目录）。

名称	说明
css	用于存放css文件
images	用于存放图片
index	首页html
js	用于后期存放javascript文件

二、常见的网页布局分类

1、表格布局

​ 优点：

（1）表格布局，使得结构位置更简单；
（2）对于学习初期，table更容易理解；
（3）数据化的存放更合理；

​ 缺点：

（1）标签结构多，复杂，影响网站性能；
（2）不利于搜素引擎抓取信息，影响网站的排名；
（3）table一旦设计完成很难通过css让他展现新的面貌

2、DIV+CSS布局

​ 网页HTML代码主要使用DIV将内容模块化，用CSS控制其显示效果。

​ 浮动布局：是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，可以实现一行显示多个div的功能。

​ 在div+css布局之前采用的是table表格的布局方式。由于table表格布局有不足和缺点，后来慢慢就采用了div+css布局的方式。

**优点：**web的三大标准；结构（html），样式(css)和行为(js)

（1）符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您 
     的网站不会因为将来网络应用的升级而被淘汰。    
（2）CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。
（3）支持浏览器的向后兼容，使您的网站都能够有很好的兼容性。   
（4）样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
（5）搜索引擎更加友好。         
（6）