• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 使用DIV+CSS布局网站的优点和缺陷分析

使用DIV+CSS布局网站的优点和缺陷分析

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含DIV+CSS,优点和缺陷等相关知识,佚名 希望在学习及工作中可以帮助到您

如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较上手;但是,它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法——DIV+CSS。

  CSS网页布局的意义体现在如下方面:

  一、使页面载入得更快

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

  二、降低流量费用

  页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。

  三、修改设计时更有效率

  由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。

  四、保持视觉的一致性

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

  五、更好地被搜索引擎收录

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

  六、对浏览者和浏览器更具亲和力

  我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。

  说了这么多CSS网页布局的意义与优点,同时也不能轻视CSS网页布局的副作用:

  一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。

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

  三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。

  四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

  综合以上讨论的DIV+CSS优势和略势,我认为不可盲目跟风,如何更有效、更合理的运用WEB2.0设计标准,这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好,我觉得这需要通过不断的实践和体检,积累丰富的设计经验,才能很好的掌握这门技术。

您可能想查找下面的文章:

  • 学习DIV+CSS网页布局之混合布局
  • 学习DIV+CSS网页布局之三列布局
  • 学习DIV+CSS网页布局之两列布局
  • 学习DIV+CSS网页布局之一列布局
  • 前端设计师需要了解的9个问题
  • DIV+CSS中让布局、背景图片、文字内容居中的方法
  • DIV+CSS垂直居中一个浮动元素
  • 使用div+css布局过程中在什么时候使用table呢
  • DIV+CSS通过border样式制作带箭头提示框效果
  • div+css纵向导航如何实现且为导航添加超链接

相关文章

  • 2017-08-06CSS中的before和:after伪元素使用详解
  • 2017-08-06google drive、dropbox、115等云存储列表交互的对比
  • 2017-08-06IE8 控件错位的解决方法
  • 2017-08-06ie下的css层叠z-index各种问题详细整理
  • 2017-08-06CSS学习之四 浮动
  • 2017-08-06CSS: list-style 和 inline使用方法详解
  • 2017-08-06不同CSS技术及其CSS性能之间的差异
  • 2017-08-06纯CSS改变webkit内核浏览器的滚动条样式
  • 2017-08-06CSS中display:block的作用介绍
  • 2017-08-06css教程之样式表的基本语法(二) class(类)和id的一个小实例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • div+css实现软件公司网站蓝色导航菜单代码
    • 浅谈CSS伪类与伪元素
    • CSS3中background-clip和background-origin的区别示例介绍
    • CSS Cookbook 创建文字导航菜单和翻转特效
    • 利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
    • 使用CSS3的ruby-position固定注音位置的用法示例
    • 用网页技术CSS实现网页背景渐变的四种代码设置
    • css中position:fixed实现div在窗口上下左右居中
    • 巧用CSS3 border实现图片遮罩效果代码
    • CSS :active 伪类 元素被激活时的样式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有