浅析CSS+DIV网页布局的优缺点
【摘 要】 本文先从一个案例着手，简要介绍了使用CSS+DIV技术对页面布局的思维过程。从而分析出CSS+DIV技术具有结构与表现分离、页面下载速度快、容易被搜索、页面容易修改与排版能力强等优点， 同时也存在CSS代码编写难度高、调用复杂等缺点。
【关键词】 网页布局 CSS+DIV WEB2.0标准 Table
随着WEB2.0标准化设计理念的普及，国内外很多大型门户网站及商业网站纷纷采用CSS+DIV技术来布局网页。使得CSS+DIV布局已经成为网页设计师必备技术。
1 CSS+DIV网页布局案例
下面以布局一个页面为例，简要说明如何使用CSS+DIV对页面布局的思维过程。
（1）设计人员使用Photoshop等工具制作出页面的整体效果通常如图1所示。
（2）根据页面效果构思页面布局。这里通过分析后可以发现页面大致可以分为顶部、中部和底部三部分，为了更加直观地说明他们之间的关系，图2所示是拟规划的页面布局图。
（3）通过拟规划的页面布局图，设计人员在网页中创建一系列的DIV容器，其结构如图3所示。
（4）待页面布局完成后，便可以书写CSS规则和增加实质的内容信息。在制作过程中，通过浏览器预览页面，对CSS规则做进一步修改直到与效果图相一致。
生成的css表格样式CSS样式表文件部分代码如下：
* {margin：0px；padding：0px；}
body {background：#fff；font-family：”Times New Roman”， serif；font-size：12px；}
#container {width：900px；margin：auto；}/*定义头部区域规则*/
#header {width：900px；height：426px；background： url（../images/header-bg.gif） no-repeat bottom left；margin-bottom：45px；}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。