web前端设计表格布局和div+CSS布局

2021-02-05 分类：网站建设

传统表格布局利用了HTML中的表格元素设置参数以达到无边框特性，将网页中的各个元素按版式划分放入表格的各单元格中，从而实现复杂的排版组合。

特点

现在依然有网站在使用表格布局，表格布局使用方法简单，制作只要将内容按照行和列拆分，用表格组装起来即可实现设计版面布局。

如今我们对网站外观要求和体验的不断提高，开发人员用各种图片来装饰网页。由于一些大图会致使下载速度缓慢，所以一般我们将大图切分成若干个小图，使网页加载速度加快。下图所示为使用表格布局的页面和该页面的部分HTML代码。

网页效果

CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。

所有都元素都被看做是一个个盒子，它们占据一定空间，在其中有着特定的内容。我们可以通过调整盒子的边框和间距等参数来调节盒子的位置以及大小。页面是由大大小小许多盒子组成的，这些盒子互相之间彼此影响，因此，我们既需要理解每个盒子内部的机构，也需要理解盒子直接的关系以及互相的影响。

组成

盒子模型由content（内容）、border（边框）、padding（内边距）、margin（外边距）共4个部分组成。如下图：

一个盒子在页面上由“内容+内边距+外边距+边框”组成的，可以通过设定盒子的border、padding和margin来实现各种各样的排版效果。也不是所有用

定义的网页元素才是盒子，所有的网页元素都可以看做是盒子。网页上的表格、图片、文字等，从盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。

网页改版维护的维护

表格布局：复杂的表格设计使得设计不易，修改更复杂，最后生成的网页代码有许多冗余，还有许多没有任何意义的元素，文件量庞大，下载慢，解析速度也慢，维护和更新困难。

Div+CSS：可以把要展示的内容与其表现样式分开，对CSS文件进行修改，其他HTML文件中自动进行套用，不必在每个HTML文件中重复设置，减少设计者更多负担，修改页面更省时。

保持视觉的一致性：

DIV+CSS技术，方便统一网页风格，避免了不同区域或不同页面体现出的效果偏差。

页面载入得更快：

大部分页面代码写在了CSS当中，使页面体积容量更小。比表格嵌套的方式，DIV+CSS将页面独立成更多区域，打开页面时，逐层加载，而不像表格嵌套那样整个页面圈在一个大表格里，由此页面加载速度更加极速。

搜索引擎友程度高：

用表格进行网页布局的代码较多，搜索引擎要把多的代码去掉。而使用DIV+CSS布局设计网页，所有样式都在CSS里，正文代码得到极大的精简，也减少了HTML代码，正文就突出了，搜索程序能在更短的时间内爬完整个页面，搜索程序执行效率得到了提升。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容