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布局的优势和弊端的更多相关文章
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
随机推荐
- Jmeter与LoadRunner的比较
一.与Loadrunner的比较相似点 1.Jmeter的架构跟loadrunner原理一样, 都是通过中间代理,监控&收集并发客户端发现的指令,把他们生成脚本,再发送到应用服务器,再监控服务 ...
- 反转链表-PHP的实现
<? //节点 class Node { private $Data;//节点数据 private $Next;//下一节点 public function setData($value) { ...
- curl发送多维数组
//通过curl模拟post的请求: function SendDataByCurl($url,$data=array()){ //对空格进行转义 $url = str_replace(' ','+' ...
- 005.Ansible de palybook简单使用
一 Ansible Playbook简介 ansbile-playbook是一系列ansible命令的集合,利用yaml 语言编写.playbook命令根据自上而下的顺序依次执行.同时,playboo ...
- GitHub 如何忽略文件或者文件夹
在我们开发项目的时候,往往会产生一些不必要的文件,我们会选择忽略他们,不提交到版本控制中,那我们该如何做呢? 步骤一:在项目根目录下,右键,git bash,在弹出的命令行输入框中输入命令:touch ...
- 13206抢票代码 py
抢票代码 https://github.com/Bingshuli/12306Python 谷歌驱动 http://chromedriver.storage.googleapis.com/index. ...
- The new SFCB broker fails to start with a SSL-related error: Failure setting ECDH curve name (secp22
# openssl ecparam -list_curves secp384r1 : NIST/SECG curve over a 384 bit prime field secp521r1 : NI ...
- git取消跟踪(unversion)
有时候我们会git add了一些不想跟踪的文件,通过下面的命令可以在没提交前从index里删掉跟踪记录(保留本地文件) git rm –cached 文件名
- IDEA 之 常用快捷键
1. 编辑 No. 快捷键 功能描述 01 Ctrl+Space 补全代码 02 Ctrl+Shift+Space 补全代码,添加分号结束符 03 Ctrl+q 展示某个类或方法的API说明文档 04 ...
- 【Linux常见命令】ifconfig命令:配置与查看网络信息
ifconfig(interfaces config).通常需要以root身份登录或使用sudo来使用ifconfig工具 ifconfig 命令用来查看和配置网络设备.当网络环境发生改变时可通过此命 ...