为什么使用div css布局?

提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。

为什么使用div css布局?

DIV+CSS的优势

1、符合W3C标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。

2、对浏览者和浏览器更具亲和力。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是什么,您的网站都能很好的兼容。

3、使页面载入得更快。页面体积变小,浏览速度变快,由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。

4、保持视觉的一致性。以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。

5、修改设计时更有效率。由于使用了DIV+CSS制作方法,使内容和结构分离,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式,在团队开发中更容易分工合作而减少相互关联性。

6、搜索引擎更加友好。相对与传统的table,

采用DIV+CSS技术的网页,由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中代码更加简洁,正文部分更为突出明显,便于被搜索引擎采集收录。

当然了,尽管DIV+CSS具有一定的优势,不过现阶段CSS+DIV网站建设存在的问题也比较明显,下面我们来看看DIV+CSS网站设计的缺陷

DIV+CSS网站设计的缺陷,主要表现在:

1、对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局(table),CSS+DIV尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了,这在一定程度上影响了XHTML网站设计语言的普及应用。

2、CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在一个或几个外部文件中,这些文件有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。

3、对于CSS网站设计的浏览器兼容性问题比较突出。虽然搜索说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,CSS+DIV还有待于各个浏览器厂商的进一步支持。

4、CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

如何更有效、更合理的运用WEB2.0设计标准,这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好,需要通过不断的实践和体检,积累丰富的设计经验,才能很好的掌握这门技术。

Image placeholder
前端答疑
未设置
  49人点赞

没有讨论,发表一下自己的看法吧

推荐文章
选择器和介绍CSS布局笔记

css选择器: 1.元素选择器,例如:p{}; 2.类选择器,例如:.box{}; 3.ID选择器,例如:#box{};

软件定义IT基础架构,如何看待深信服的产品战略布局?

在很多人的潜意识里,深信服是一家令人尊敬的企业,技术支撑能力强,产品种类多,功能全面,后劲足,是少数能和华为、新华三同台竞技的企业之一。但有时候,深信服也会被这些优势所累,比如经常会被问道:你们和华为

Qt on Linux 使用deb打包发布

DistributeQtAPPonPPAofUbuntuusingthe.debpackage.[Abstract]:在QtonLinux上开发程序完成后需要脱离本机所营造的开发库环境变量运行,则需要

一键“脱”衣应用DeepNude迅速下线,来看看它涉及的图像修复技术

大数据文摘出品来源:Github发布者:yuanxiaosc上周,又一AI偏门应用DeepNude爆出,一键直接“脱掉”女性的衣服,火爆全球。应用也很容易上手,只需要给它一张照片,即可借助神经网络技术

用docker拓展压测工具artillery的能力

指定域名的IP地址最近在用artillery做压测时遇到一个问题。我需要压测某一个通过域名访问的服务,而这个域名背后的机器地址需要随着压测用例变化的。通常这就是DNS要做的事情-把不变的域名和变化的地

css flex布局的优缺点是什么?

Flexbox布局(FlexibleBox)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的。(这里我们称为Flex)。Flex布局主要

css grid布局的优缺点是什么?

Grid(网格)布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格;能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。grid布局的优点:1:固定和灵活的轨道尺寸2:可以使用行号,

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

css3布局方式有几种

css3布局方式有几种css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。下面我们来看看各种布局的效果吧。一、多栏布局——栅格系统栅格系统就是利用浮动实现的多栏布局,在

css栅格布局图文详解

圣杯布局圣杯布局是一种三列布局,两边定宽,中间自适应:css:*{ box-sizing:border-box; } html,body{ width:100%; height:100%; margi

CSS常见布局问题

1、多元素水平居中实现一下效果:平常人看见题目,最初感觉实现图片中的效果不难,设置小黑框的宽高边距,字体水平垂直居中即可。其实,题目应该实际上是考察多元素水平居中,即无论元素(小黑框)基数为多少,它们

DIV+CSS页面布局笔记

浮动属性:float:none/left/right(display属性将失效,clear清除后不能再使用)定位属性:position:relative(相对定位)/absolute(绝对定位)/fi

DIV+CSS页面布局笔记

页面布局常用标签div无意义块状元素标签span无意义行内元素标签p段落ul无序列表a超链接li列表项img图片i斜体标签b粗体标签 页面布局常用选择器id选择器:#id类选择器:.class关系选择

DIV+CSS页面布局笔记

HTML标签每个div就是一个盒子

DIV+CSS页面布局笔记

相对定位:以自己为参照物relative 绝对定位:默认参照物浏览器。absolute如果父类做了定位,则按照父类为参照物。依次往上调用。 固定定位:fixed根据窗口定位。 z-index设置定位元

DIV+CSS页面布局笔记

在css中,设置背景图片时,能在同一个元素下设置多个背景图吗?可以

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

.vue文件怎么使用组件?

.vue文件怎么使用组件?在vue中组件以.vue结尾,一个.vue文件就是一个组件。下面介绍下在组件中使用其他组件的方法。(相关课程推荐:Vue.js教程)1、首先创建一个组件MyTest.vue

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

前端不得不了解的 Flex 布局

背景 又双叒叕被老大拉来顶替前端小姐姐撸代码,接触到了Flex布局,以前只听过没用过,碰巧这次要揭露她的面纱,就记录一下。接触前端的同学都应该知道网页布局是CSS的一个重点,布局的传统方案都是基于盒

前端不得不了解的 Flex 布局

背景 又双叒叕被老大拉来顶替前端小姐姐撸代码,接触到了Flex布局,以前只听过没用过,碰巧这次要揭露她的面纱,就记录一下。接触前端的同学都应该知道网页布局是CSS的一个重点,布局的传统方案都是基于盒