CSS+DIV布局与表格布局网页的对比

闻立鸥

摘要：随着信息技术的飞速发展，网页的制作技术也在不断进步，CSS+DIV是当前网页布局的主流技术，本文通过实例将CSS+DIV布局网页与传统的表格布局网页进行比较，清晰地验证了CSS+DIV技术布局网页的高效工具。

关键词：CSS；DIV；技术

中图分类号：TN915.02 文献标志码：A 文章编号：1674-9324（2014）37-0225-03

一、CSS+DIV布局简介

DIV元素是html语言中的一个元素，是标签，用来为HTML文档的内容提供结构和背景的元素。css是英语Cascading Style Sheets的缩写，中文名称为层叠样式表，它是用来表现网页外观样式的计算机语言。CSS提供了丰富的样式表现功能，如字体、段落、颜色、背景、布局等。每个HTML标签都含有style属性。利用style属性可以将CSS样式直接写入HTML文档的某个标签内。DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。

二、表格布局网页的问题

表格曾经是网页制作中应用最频繁的元素，起主要作用是定位和排版网页，便于初学者掌握和使用。但是使用表格技术制作的网页，由于嵌套了大量的表格，不仅容易产生页面内容错位，使网页维护和更新的工作量非常繁重，更重要的是产生了大量的冗余代码，从而使网页容量剧增，浏览器加载缓慢。

三、两种方式布局页面的代码对比

下面通过制作一个歌曲专辑列表页面为例，来比较两种方法布局网页的区别。效果图如下图所示：

①使用CSS+ DIV布局代码如下：

专辑语言：国语

专辑名称：优秀儿歌精粹

歌手姓名：九通电CD

發行日期：2014年01月

专辑语言：国语