《与表格实现网页布局的比较》由会员分享，可在线阅读，更多相关《与表格实现网页布局的比较（6页珍藏版）》请在金锄头文库上搜索。
1、CSS+DIV 与表格实现网页布局的比较【摘要】在网页设计的过程里，实现同一个效果有无数方法，而且新的方法还在不断的出现。CSS 以及 DIV 作为网页制作的重要组成部分，已经成为网页设计中必不可少的要素。布局网页就是把文字、图片、动画安排到合适的位置，再把每部分合理的叠放到网页中。 【关键词】CSS+DIV；网页布局；表格；优点 一、CSS+DIV 布局介绍 CSS+DIV 布局，是通过 CSS 控制 DIV 标签的位置来实现。CSS 控制 DIV 搭建网页，可以生成简洁的网页源代码，提高页面的浏览速度；同时 CSS 也可以自如地控制网页外观，如边框、背景、链接等，这种布局方法不仅可以制作出
2、精美的网页，也可以提供良好的用户浏览体验，是目前非常流行的一种布局技术。“盒模型”是 CSS+DIV 布局的基础理论。“盒模型”理论认为：页面上的每一个元素都被看做是一个矩形，这个矩形由内容、填充、边框和边距构成。 CSS 布局网页，像拼积木一样，按照规划好的网页草图，把每部分按顺序搭建。CSS 布局网页，用到的积木就是 DIV，每个 DIV 就是一个框架，而框架的大小、位置、外观等属性则由 CSS 控制。 CSS 布局网页，为每个 DIV 设置 ID，这个 ID 就是每一个 DIV 在 CSS 中的接口，CSS 只需对这个接口（ID）来设置属性，从而实现对 DIV 的控制。CSS 也真正实现
3、了“表现与样式分离”，DIV 实现“表现”，CSS 控制“样式”。网页中有什么内容就放置到 DIV 中，而 DIV 不会管所放内容的样式，样式由 CSS 通过接口（ID）来统一控制。 在 CSS+DIV 布局网页中，每个 DIV 从上到下依次叠放，这就是 DIV 在网页中原始的也是唯一的顺序，这样的顺序叫网页的“普通流”。不过，这样的顺序有很大的局限性，单靠这样的顺序无法实现网页的复杂布局，CSS 可以改变DIV 的原始排版顺序，这就是浮动（float）。通过浮动（float）、清除（clear）、定位（position）以及“盒模型”的综合应用就可以实现网页的布局。 二、传统网页布局的缺点
4、使用表格布局，单元格与单元格之间会产生相互影响和制约，比如同列的单元格中根据内容的多少需要将单元格的宽度设置为不同的大小，这要就需要用到嵌套表格，嵌套表格的使用对于初学网页布局的学生来说总是搞不清楚表格和单元格之间的嵌套层次关系，提高了设计的难度，也使修改更为复杂，并且代码层层嵌套有时还会使网页的结构错位，最终造成网页布局很乱。 三、CSS+DIV 实现网页布局的优点 1.将表现和内容分离 有了 CSS，使得 HTML 不再需要做任何的表现，在 HTML 文件中只需存放网页要展示的内容，而网页内容的表现形式完全用 CSS 来实现。由此 HTML 文件少了许多繁琐的属性代码，而且简洁的代码也更容
5、易被搜索引擎搜索到网页内容。并且一个 CSS 文件可以被多个 HTML 文件使用，减少了代码的上传数量。 2.样式丰富。 HTML 本身的标记比较少，特别是美工样式的标记远不够使用，比如文字间距、段落缩进等，这些在 CSS 里都可以进行设置。 3.易编辑和维护 CSS 代码既可以保存成单独的样式表文件，可以被其他网页导入或链接使用，使得这些网页具有统一的风格，减少了设计师的工作量，提高了工作效率。当需要修改网页的某一个显示样式时，可直接在 CSS 中进行修改，而不必去修改 HTML 文件中复杂的代码，并且所有使用该 CSS 的 HTML 文件都可以自动更新，从而大大的减少了编辑时间。 4.支持
6、大多数浏览器 CSS 支持目前使用的大多数浏览器，由于不同厂商的浏览器以及同一厂商不同版本的浏览器对 CSS 语义的解释存在一定的差异，而且 CSS 的版本也在不断的更新升级，这样会造成一些兼容性问题，但只要通过一些简单的方法就可以解决 CSS 在不同浏览器中的兼容性问题。 5.提高页面浏览速度 CSS 的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，对于同一个页面视觉效果，采用 CSS+DIV 重构的页面容量要比 TABLE编码的页面文件容量小得多，前者一般只有后者的 1/2 大小。 四、实现某网站首页的两种布局代码比较。 1.使用 CSS+DIV 布局 html 代码：
7、 网站 logo网站导航网站动画新闻区信用卡介绍特惠商户热门礼品登陆区申请区列表区版权和法律声明区2.使用表格布局的 html 代码：logo导航 flash 动画新闻区 信用卡介绍区 特惠商户 热门礼品登陆区 申请区 列表区版权和法律声明区五、结束语 DIV+CSS 网页布局方法已经成为主流的网页布局方法，使用 CSS+DIV 布局，真正实现了结构、表现和行为的分离。提高了网页开发的效率和页面下载的速度，提高了网站维护和修改的效率。 参考文献 1李继伟，陈世雷.CSS+DIV 制作网页浅谈J.应用科技. 2张呈宇.Dreamweaver 中 DlV+CSS 布局初探J.2011 （16）：115-116. 3车开森.浅谈 CSS+DIV 在网页制作中的应用J.计算机光盘软件用，2012（2）.
