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

发展过程

上个世纪Web开发人员流行使用表格进行文档整体布局。因为当时大部分浏览器不支持CSS,而且大部分人不会CSS,且没有文档拆分设计,致使文档臃肿,到了上个世纪末大部分没有相关背景的人进入,对于那些没有相关背景的开发人员觉得表格布局简单,致使使用它的人更多。本世纪出出现了泡沫危机致使大部分非专业人士的推出,而剩下来的大神觉得css更具有优势,所以div+CSS就得以发展。

传统表格布局

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

特点

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

浅谈web前端中的表格布局与CSS盒子布局

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

浅谈web前端中的表格布局与CSS盒子布局

网页效果

浅谈web前端中的表格布局与CSS盒子布局

div+CSS

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

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

组成

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

浅谈web前端中的表格布局与CSS盒子布局

一个盒子在页面上由“内容+内边距+外边距+边框”组成的,可以通过设定盒子的border、padding和margin来实现各种各样的排版效果。也不是所有用<div>定义的网页元素才是盒子,所有的网页元素都可以看做是盒子。网页上的表格、图片、文字等,从盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。

总结

网页改版维护的维护

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

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

保持视觉的一致性:

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

页面载入得更快:

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

搜索引擎友程度高:

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

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/48412.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
优化家优化家订阅用户
上一篇 2022年7月4日
下一篇 2022年7月4日

相关推荐

  • 分享影响烟台网站建设的关键指标。

       其实,做过网站的朋友都知道,影响网站的因素很多,但我们应该注意影响网站建设的关键指标,虽然这些指标不能涵盖所有的关键指标,但一旦掌握了这些指标,我们的网站一定会更上一层楼。   一:流量来源   1.跳页…

    2023年6月11日
    00
  • 网站优化之网站内部结构优化细则。

    做网络优化的都应该知道网站的结构对网站优化的重要性,合理的网站结构能提升搜索引擎对网站的友好性,能增加蜘蛛抓取和收录的数量,那么在日常的优化过程中应该如何的去优化调整网站的内部结构呢? 做网络优化的人…

    2022年9月10日
    057
  • 重点介绍市面上自主研发网站建设收费标准与网页套餐服务内容细节。

    两年前,互联网+的概念开始流行。现在,大多数企业都意识到需要开始建立网站,实现真正的线上和线下营销。许多商业领袖现在意识到,开放的步是建立一个网站。但问题是,当你想建立一个网站,你不知道互联网公司的报…

    2023年2月17日
    01
  • 网站建设走高端路线的方法。

    按照冲微私订的理解,外观不好看的网站建设不能称之为高端网站。网站建设最关键的改进不是界面设计,而是功能的实用性和用户体验。所以网站定位一定不能误解“高端”二字。接下来网站建设公司崇威私地给大家讲解如何…

    2022年9月10日
    069
  • 我来教你在html5中如何填充图片内容。

    在HTML5中,我们可以使用<img>标签来填充图片。<img>标签是HTML中用于插入图像的标签,它有两个必需的属性:src和alt。src属性用于指定图像的URL,而alt属性用于提供图像无法显示时的替代文本。 (图片…

    2024年6月25日
    00
  • 网页平台、订制网页系统还是开源CMS。

    Web平台,定制Web系统还是开源CMS? CMS是网站的核心 很多朋友认为网站公司第一件事就是把网站做漂亮,视觉感对于网站设计来说就是一切,但是事后预言家把剩下的事情搞砸了。而且,漂亮的网页确实能给新老用户相当…

    2022年9月10日
    065
  • 抓住用户的心理。

    面对越来越激烈的电商时代,要想做好网站运营,就要抓住机遇,好的方法和用户心理。很多站长在网站建立之初都是以狂热的态度应对,但是在运营网站的时候确实很迷茫,不知道从何下手。 那么如果我们要吸引用户,我们…

    2022年9月10日
    062
  • 我来分享高端手机网站建设功能设计的要点。

    移动互联网的发展,以及手机用户的不断增加,手机网站建设也开始多样化。今天我们来分析一下高端手机网站建设中,网站功能的设计有哪些要点。 第一、不要使用flash以及Java。通过统计得出,智能手机市场上,使用苹…

    2023年6月13日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息