有效的网站建设公,建设人力资源服务网站工作方案,在线ui设计,wordpress空间满在web前端设计排版时我们可能会用到表格布局和divCSS布局#xff0c;但现在主要使用后者#xff0c;为何#xff1f;今天我们来谈一谈两者之间的发展和原理。话不多说下面来干货发展过程上个世纪Web开发人员流行使用表格进行文档整体布局。因为当时大部分浏览器不支持CSSCSS布局但现在主要使用后者为何今天我们来谈一谈两者之间的发展和原理。话不多说下面来干货发展过程上个世纪Web开发人员流行使用表格进行文档整体布局。因为当时大部分浏览器不支持CSS而且大部分人不会CSS且没有文档拆分设计致使文档臃肿到了上个世纪末大部分没有相关背景的人进入对于那些没有相关背景的开发人员觉得表格布局简单致使使用它的人更多。本世纪出出现了泡沫危机致使大部分非专业人士的推出而剩下来的大神觉得css更具有优势所以divCSS就得以发展。传统表格布局传统表格布局利用了HTML中的表格元素设置参数以达到无边框特性将网页中的各个元素按版式划分放入表格的各单元格中从而实现复杂的排版组合。特点现在依然有网站在使用表格布局表格布局使用方法简单制作只要将内容按照行和列拆分用表格组装起来即可实现设计版面布局。如今我们对网站外观要求和体验的不断提高开发人员用各种图片来装饰网页。由于一些大图会致使下载速度缓慢所以一般我们将大图切分成若干个小图使网页加载速度加快。下图所示为使用表格布局的页面和该页面的部分HTML代码。网页效果divCSSCSS布局是网页html通过div标签css样式表代码开发制作的html网页的统称。所有都元素都被看做是一个个盒子它们占据一定空间在其中有着特定的内容。我们可以通过调整盒子的边框和间距等参数来调节盒子的位置以及大小。页面是由大大小小许多盒子组成的这些盒子互相之间彼此影响因此我们既需要理解每个盒子内部的机构也需要理解盒子直接的关系以及互相的影响。组成盒子模型由content内容、border边框、padding内边距、margin外边距共4个部分组成。如下图一个盒子在页面上由“内容内边距外边距边框”组成的可以通过设定盒子的border、padding和margin来实现各种各样的排版效果。也不是所有用div定义的网页元素才是盒子所有的网页元素都可以看做是盒子。网页上的表格、图片、文字等从盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。总结网页改版维护的维护表格布局复杂的表格设计使得设计不易修改更复杂最后生成的网页代码有许多冗余还有许多没有任何意义的元素文件量庞大下载慢解析速度也慢维护和更新困难。DivCSS可以把要展示的内容与其表现样式分开对CSS文件进行修改其他HTML文件中自动进行套用不必在每个HTML文件中重复设置减少设计者更多负担修改页面更省时。保持视觉的一致性DIVCSS技术方便统一网页风格避免了不同区域或不同页面体现出的效果偏差。页面载入得更快大部分页面代码写在了CSS当中使页面体积容量更小。比表格嵌套的方式DIVCSS将页面独立成更多区域打开页面时逐层加载而不像表格嵌套那样整个页面圈在一个大表格里由此页面加载速度更加极速。搜索引擎友程度高用表格进行网页布局的代码较多搜索引擎要把多的代码去掉。而使用DIVCSS布局设计网页所有样式都在CSS里正文代码得到极大的精简也减少了HTML代码正文就突出了搜索程序能在更短的时间内爬完整个页面搜索程序执行效率得到了提升。如果有任何错误和纰漏请联系我更正。如果你有任何意见一定要联系告诉我让我快速成长起来哟。
