为什么用div css布局

为什么用div css布局?

刚刚接触前端,一直觉得table布局在代码上看起来比div+css更整洁,div+css布局的页面,一堆的

看起来都让人犯密集恐惧症,那么为什么现在的主流网站还都乐此不疲呢?为什么div+css反而成了一种主流布局方式呢?

通过分析DIV+CSS的优缺之后就能明白为什么使用DIV+CSS布局了。

为什么用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文件中,这就使得网页中代码更加简洁,正文部分更为突出明显,便于被搜索引擎采集收录。

CSS+DIV网站设计的缺陷

尽管DIV+CSS具有一定的优势,不过现阶段CSS+DIV网站建设存在的问题也比较明显,主要表现在:

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运用的更好,需要通过不断的实践和体检,积累丰富的设计经验,才能很好的掌握这门技术。

以上就是为什么用div css布局的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1614603.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:25:41
下一篇 2025年12月24日 04:25:48

相关推荐

  • css中怎么把ul居中

    今天在调整ul居中的问题时,遇到了点小困难,以前在使用ul时候,让其不是垂直的排列而是,横着排列都是使用float:left这个属性,但是呢,今天我在弄一些友情链接的时候,就出现了ul在div中居中不了的问题,就是在div中加入了style=“text-align:center;” ul也不居中,最…

    好文分享 2025年12月24日
    000
  • css怎么设置横向导航

    导航栏 熟练使用导航栏,对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的。 立即学习“前端免费学习笔记(深入)”; 导航条基本上是一个链接列表,所以使用 和 元素非常有意义: 主页 新闻 联系 关于 有…

    2025年12月24日
    000
  • css文件开头怎么写

    写css 没有固定的开头的,直接写 选择+声明就可以了。 1、当然也有@charset “utf-8″的声明 这个声明是告诉浏览器【我的CSS文件是UTF-8编码的】,但实际上这个文件可以不用是UTF-8编码的,所以这个声明能达到欺骗浏览器的作用。 但实践中表明,chrome…

    2025年12月24日
    000
  • css solid什么意思

    border(画边框),它是css的一个属性,用它可以给能确定范围的html标记(如td、div等等)画边框,可以给文本加边框,给导航菜单加分隔线,下面与大家分享个实例,感兴趣的朋友可以了解下 制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可…

    2025年12月24日
    000
  • css怎么用id进行定位

    id 选择器可以为标有特定 id 的 html 元素指定特定的样式。 id 选择器以 “#” 来定义。下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: #red {color:red;}#green {color:green;} 下面的 …

    2025年12月24日
    000
  • css 搜索框怎么变大

    搜索条在我们网站是必不可少的,尤其是在有限的页面空间里,放置一个重要的搜索条是个难题,今天将结合实例给大家介绍一下如何使用css3来实现一个可伸缩功能的搜索条。 结构: 关键样式: 立即学习“前端免费学习笔记(深入)”; .demo-a input{width: 15px; border-radiu…

    2025年12月24日
    000
  • css怎么整体居中

    一般网页主体内容布局均为居中于浏览器。如创想鸟首页,主体为居中布局。 如何使用CSS让整个网页布局居中呢?布局居中条件是什么呢? 首先我们要对body设置css内容居中样式(css text-align:center),然后布局最外层DIV盒子时候使用 margin:0 auto即可让对象布局居中。…

    2025年12月24日
    000
  • css cursor属性怎么用

    css cursor属性用于指定要显示的光标的类型(形状),定义了鼠标指针放在一个元素边界范围内时所用的光标形状。所有主流浏览器都支持 cursor 属性。 css cursor属性怎么用? cursor 属性规定要显示的光标的类型(形状)。 可能的属性值: ● url:需使用的自定义光标的 URL…

    2025年12月24日
    000
  • css flex属性怎么用

    flex 属性是css的一个简写属性,用于设置或检索弹性盒模型对象的子元素如何分配空间。如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。 css flex属性怎么用? flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 说明:flex 属性是 flex-grow、fle…

    2025年12月24日
    000
  • 用记事本怎么写css

    用记事本怎么写css?这里有详细步骤 步骤: 1、在windows中打开记事本程序 2、记事本中输入css代码 立即学习“前端免费学习笔记(深入)”; 3、单击菜单“文件”—>“保存”,弹出“另存为”对话框,将上述文档保存为后缀为“*.css”的css文档,如my_fi…

    2025年12月24日
    000
  • css text-align属性怎么用

    css text-align属性用于设置元素中文本的水平对齐方式。该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。   css text-align属性怎么用? tex…

    2025年12月24日
    000
  • css letter-spacing属性怎么用

    css letter-spacing属性用于增加或减少字符间的空白(字符间距),语法为letter-spacing : normal | length;其中normal相当于值为 0。该属性允许使用负值,这会让字母之间挤得更紧。 css letter-spacing属性怎么用? letter-spa…

    2025年12月24日
    000
  • css全局样式有什么意义

    css全局样式有什么意义? css全局样式的意义就是为了规范开发,提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构。 同时使用全局样式更符合web标准,页面性能得到优化,代码简洁、明了、有序,尽可能的减少服务器的…

    2025年12月24日
    000
  • css外部样式表怎么写

    外部css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在 内(不是在标签内)使用标签将css样式文件链接到html文件内,如下面代码: 注意: 1、css样式文件名称以有意义的英文字母命名,如 main.css。 2、rel=”…

    2025年12月24日 好文分享
    000
  • dedecms怎么修改css

    织梦dedecms修改模板默认css文件分析:首先,打开后台——模板——默认模板管理——index.htm. 看到有一句,说明,我们模板是根据这个CSS来布局网页的,于是我们就打开网站目录下面的templetsstylededecms.css.然后来分析一下CSS的构成。 我们根据主页的调用,来研究…

    2025年12月24日
    000
  • dw怎么创建css文件

    在dreamweaver cc中可以直接创建css文件,或在内面内手写输入css代码定义规则等等。 如果要使用可视化css编辑,可以使用css设计器,在默认的界面下,在软件窗口右侧的活动窗口内就可以找到css设计器。 例如:新建一个html文件,点击css设计器的“源”窗口的“+”号,选择创建css…

    2025年12月24日
    000
  • css outline-color属性怎么用

    轮廓是绘制于元素周围的一条线,位于边框边缘的外围。outline-color属性用于设置一个元素整个轮廓中可见部分的颜色。需始终在outline-color属性之前声明 outline-style 属性;元素只有获得轮廓以后才能改变其颜色。 css outline-color属性怎么用? outli…

    2025年12月24日
    000
  • css类选择符用什么

    在 css 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center&#82…

    2025年12月24日
    000
  • 左浮动 css怎么写

    css样式的float浮动属性,用于设置标签对象(如: 标签盒子、标签、标签、标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。 float是什么意思? float是浮动,翻译成中文也是浮动意思。 float的作用…

    2025年12月24日
    000
  • css text-indent属性怎么用

    css text-indent属性用于规定文本块中首行文本的缩进;语法为text-indent : length | % 。该属性允许使用负值;如果使用负值,那么首行会被缩进到左边。  css text-indent属性怎么用? text-indent 属性规定文本块中首行文本的缩进。 语法: 立即…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信