整 理：晋哲、徐秀 时 间：2015-10-16 说 明：DIV+CSS布局 > 简述 常见的网页布局方式，它取代了使用表格定义布局的老式方法。 DIV+CSS布局方式采用DIV盒模型结构将页面各部分内容划分到不同的区块，然后使用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等样式。具备全局设计观念，进行网页的统一设计管理，通过一个样式表，牵一发而动全身，只要修改样式表，就可以统一全站的风格。 简单地说，DIV用于搭建网页结构（框架）、CSS用于创建网页表现（样式/美化），页面内容和样式表现相分离，对网页进行标准化重构。 > 实例步骤 一、浏览设计效果图 综览设计图，可将页面结构区块划分，先构思全局架构，再细分局部结构。二、HTML整体布局 在编写html代码时，一般结合两种方式： 1、从外到内 从整体到局部，先编写外围框架代码，再嵌套内部元素代码 如常见的页面结构： body {} └Wrapper {} /*页面层容器*/ ├Header {} /*页面头部*/ ├PartMain {} /*页面主体*/ │ ├Sidebar {} /*侧边栏*/ │ └PartContent {} /*主体内容*/ └Footer {} /*页面底部*/ 2、从上到下 按页面结构、元素等顺序，有条不紊的搭建HTML框架 如下图简单的局部HTML代码结构：
总结：这两种方式没有先后之分，可以从外到内，先把整个页面的框架搭好，再一步步写每个区块里面的内容；也可以从上到下，按顺序先完成一块区域里面的全部内容，再去搭建下一个区块。 三、CSS样式美化 CSS通过选择器来关联定义盒模型的位置、大小、边框、内外边距、排列方式等样式属性。 下图为盒模型简图：
在编写样式进行页面表现时，有以下三种方式来插入样式表： 1、外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 例： <head> <link rel="stylesheet" href="style.css"> </head> 2、嵌入式样式表 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。 例： <head> …… <style> body{background-color: #fff;} </style> </head> 3、内联样式 当特殊的样式需要应用到个别元素时，可以使用内联样式。 例： <span style="color: #000; margin-left: 20px">Hello World</span> 总结：三种样式表优先使用外部样式表、嵌入式样式表用来调试用的，一般不使用内联样式表。 > 定义说明 一、DIV+CSS的实质 DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（Table）布局定位的方式不同，它可以实现网页页面内容（HTML）与表现（CSS）相分离。 DIV+CSS是WEB标准中常用的术语之一，而标准的叫法应是XHTML+CSS。通常是为了区别HTML网页设计语言中的表格（Table）定位方式，因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。所谓DIV+CSS布局的叫法容易让人误解为通篇只使用DIV标签，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。 当然不是所有的网页都需要用DIV+CSS布局，不要让DIV成为Table的替代品，例如数据页面、报表之类的页面的时候还是会用Table，WEB标准里并没有说要摒弃Table。 二、DIV+CSS的优势 1、使页面载入得更快 由于将大部分页面样式代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 2、降低流量费用 页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。 3、修改设计时更有效率 由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。 4、保持视觉的一致性 DIV+CSS最重要的优势之一，以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。 5、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。 6、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。 三、存在的问题 1、对于CSS的高度依赖使得网页设计变得比较复杂。 相对于表格布局（Table），DIV+CSS布局要比表格定位复杂的多，在网站架构时容易出现页面错位等情况，所以需要编写HTML代码和样式文件时结构严谨，样式兼容。 2、CSS文件异常将影响整个网站的正常浏览。 CSS网站制作的设计元素通常放在几个外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 3、对于网页的浏览器兼容性问题比较突出。 DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如CSS3样式属性IE兼容问题。因此在进行设计的时候也要考虑到不同浏览器的情况，进行更改和调试。
