网页表格布局方式与divcss布局方式比较探究

《网页表格布局方式与divcss布局方式比较探究》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、网页表格布局方式与DIV+CSS布局方式比较探究【摘要】本文对网页表格布局方式和DIV+CSS布局方式进行了比较，并举出实例进行对比。DIV+CSS区别于传统的表格定位的形式，用最简洁的代码实现精准的定位，也方便维护人员的修改和维护。DIV+CSS这种网页布局方式已经逐步替代传统的表格布局方式。【关键词】网页；布局方式；表格；DIV+CSS随着网络技术的迅速发展，网络也逐渐地融入到了人们的日常生活、工作和学习中。互联网上各种网站和基于Web的应用大量涌现，这些都需要用最基本的网页进行呈现。网页布局设计指的是根据网站内容和建站目的等基本要素

2、，运用版面设计原理，将网页上的视觉元素进行合理配置与表现的过程。［1］在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接反映网站的点击率，而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。、表格布局方式和DIV+CSS布局方式的比较目前，常用网页布局的方式主要为表格布局方式和DIV+CSS布局方式，这两种方式各有优缺点，下面对这两种布局方式做一比较。1.表格布局表格布局容易掌握，布局方便。但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间

3、距，这样布局的网页中表格会生成大量难以阅读和维护的代码，而且表格布局的网页要等整个表格下载完毕后才能显示所有内容，所以表格布局方式导致网页的浏览速度较慢［2］。2.CSS+DIV布局通常要实现比较精确和自适应的层布局需要设置层的样式，即用CSS控制层的位置。CSS+DIV布局采用Div来定位，通过Div的border（边框）、padding（填充）、margin（边界）和Float（浮动）等属性来控制板块的间距，具体实施是通过创建Div标签并对其应用CSS定位及浮动属性来实现［3］。CSS+DIV布局需要编写大量CSS样式代码来控制各布局

4、DIV层，因此要掌握它相对表格布局会困难一些。但CSS+DIV布局较表格布局更加灵活实用，网站布局后很容易就能调整网站的布局结构，而且CSS+DIV布局的各布局DIV层可以依次下载显示，因此其访问速度较表格布局要快。二、表格布局网页实例以下为用表格布局的一个网页的代码：表格布局网页布局如图1所示：图1表格布局效果如果以后网页设计者想调整表格布局，比如将中间的文字新闻和最右边的图片新闻调换位置，这时只能重新设计表格，这相当于重新设计一个主页，其工作量是很大的。三、CSS+DIV布局网页实例以下为用CSS+DIV布局一个网页的部分代码，在网页

5、中的预览效果如图2所示。body{text-align：center；}ttcontainer{position：relative；height：500px；width：900px；text-align：left；}^header{position：relative；height：82px；width：900px；text-align：left；}ttlinks{position：relative；height：32px；width：900px；text-align：left；position：relative；text-align：le

6、ft；float：left；}#main{position：relative；text-align：left；float：left；}ttmainl{position：relative；text-align：left；float：left；}#main2{position：relative；text-align：left；float：left；}bright{position：relative；text—align：right；float：right；ttrightl{position：relative；text-align：right；

7、float：right；}#right2{position：relative；text-align：right；float：right；}^footer{position：relative；text-align：left；float：left；