首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

DIV+CSS布局和TABLE布局的优缺点

HTML5学堂:TABLE布局是早以前CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,虽然它有时候布局网页很简单。...现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。 一.div+css布局的好处: 1.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。...2.布局精准,网站版面布局修改简单。 3.加快了页面的加载速度(最重要的)(在IE中要将整个table加载完了才显示内容)。 4.节约站点所占的空间和站点的流量。...二.table布局的好处(table布局也不是一点用的没有,这点是毋庸置疑的) 1.容易上手。 2.可以形成复杂的变化,简单快速。 3.表现上更加“严谨”,在不同浏览器中都能得到很好的兼容。

1.9K90

div+css布局时常见bug总结

(只是页面布局的bug) 欢迎补充!!!! 1.怪异模式:没有书写时会触发怪异解析现象。 2.不同浏览器中很多标签的默认样式不同。...一般用reset.css文件将浏览器重置。 3.横向双倍外边距:产生的四个条件 浮动 块属性标签 有横向的margin值 在ie6下。...4.默认行高:产生的条件 ie6 设置的文字高度超出盒模型内容区域 设置高度时会改变布局。解决办法:加入overfloat:hidden; 5.ie6不支持透明的png图。...div>p这是子选择器。可以用来选择父级下的某个子级。 bug总结:常见的bug都出现在版本低的ie中。有可能bug产生于标签的不合理使用或者css样式使用不当。 14.ie不同版本个别颜色的差别。

66520

div+css布局时常见bug总结

(只是页面布局的bug) 欢迎补充!!!! 1.怪异模式:没有书写时会触发怪异解析现象。 2.不同浏览器中很多标签的默认样式不同。...一般用reset.css文件将浏览器重置。 3.横向双倍外边距:产生的四个条件 浮动 块属性标签 有横向的margin值 在ie6下。...4.默认行高:产生的条件 ie6 设置的文字高度超出盒模型内容区域 设置高度时会改变布局。解决办法:加入overfloat:hidden; 5.ie6不支持透明的png图。...div>p这是子选择器。可以用来选择父级下的某个子级。 bug总结:常见的bug都出现在版本低的ie中。有可能bug产生于标签的不合理使用或者css样式使用不当。 14.ie不同版本个别颜色的差别。

63160

div+css布局时常见bug总结

(只是页面布局的bug) 欢迎补充!!!! 1.怪异模式:没有书写时会触发怪异解析现象。 2.不同浏览器中很多标签的默认样式不同。...一般用reset.css文件将浏览器重置。 3.横向双倍外边距:产生的四个条件 浮动 块属性标签 有横向的margin值 在ie6下。...4.默认行高:产生的条件 ie6 设置的文字高度超出盒模型内容区域 设置高度时会改变布局。解决办法:加入overfloat:hidden; 5.ie6不支持透明的png图。...div>p这是子选择器。可以用来选择父级下的某个子级。 bug总结:常见的bug都出现在版本低的ie中。有可能bug产生于标签的不合理使用或者css样式使用不当。 14.ie不同版本个别颜色的差别。

93570

CSS 定位布局 - 绝对、固定定位设置居中悬浮div

仅供学习,转载请注明出处 讨论的问题 在上一篇 CSS 定位布局 - 相对、绝对、固定三种定位 中,发现当使用定位布局的时候,存在一个无法使用margin居中的方法。...固定定位也是会影响margin居中布局的,其实就是 margin-left: auto; 失效了。 好了,那么问题来了。这种情况下,该如何设置布局呢?...在绝对定位的情况下,设置div居中布局 居中布局当然就要先使用left偏移来进行设置,不过这次偏移需要用百分比,不然浏览器稍微缩放就无法居中了。 ? ?...可以从上图看到left偏移了50%之后,div依然不是居中的,那么下一步该怎么办呢?...好了,从上面来看,绝对定位已经可以设置div居中了,那么固定定位是否也是如此呢? 固定定位设置div居中 ? ?

3.2K20

php学习之div+css标准化布局(一)

1.div+css布局 说明:在网页开发中,需要对页面内容进行“模块化标准布局”,把内容放入到某个位置,让页面形成固定规律展示出来 模块化:在网页中所有的内容都是以块来展示的 标准化:在开发网站时是有一定的标准的...,w3c标准 好处:为了把html页面和css代码进行分离,在以后的维护时和合作开发、有利于搜索引导的抓取 2.无意义div和span 说明:在html标记中一般都是有自带名称。...如h1标题,a超链接 只有div和span是没有意义的,所以布局就使用div和span,div一般给大块的内容布局,span是给行内的内容布局 块:不管内容多少,都只会占一行,可以改变大小但是还是独占一行

77621

采用DIVCSS布局对SEO优化有何好处?

DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道。代码精简所带来SEO优化直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录有更好的作用。...SEO优化中采用DIV+CSS布局的好处有: 排名的影响 基于XTHML标准的DIV+CSS布局,一般在设计完成后会尽可能的完善到能通过W3C验证。...我的几项实验结果没有完全出来,但根据目前掌握的情况来看,spider爬行Table布局的页面,遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面。...而DIV+CSS布局基本上不会存在这样的问题,从技术角度来说,HTML在控制样式时也不需要过多的嵌套。...速度问题 DIV+CSS布局与Table布局减少了页面代码,加载速度得到很大的提高,这在spider爬行时是很有利的。

99760

CSS布局(三) 布局模型

布局模型 在网页中,元素有三种布局模型: 1、流动模型(Flow) 默认的 2、浮动模型 (Float) 3、层模型(Layer) 1、流动模型(Flow) 流动(Flow)模型是默认的网页布局模式。...流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。...(内联元素可不像块状元素这么霸道独占一行) 2、浮动模型 (Float) 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动 div{float:left;}  div{float:right...;} 可以为不同的div设置不同的浮动方式来布局。...绝对定位使元素脱离文档流,因此不占据空间 ,普通文档流中元素的布局就当绝对定位的元素不存在时一样,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

2.2K71

div布局和table布局对SEO的影响

,还是有很多的官网在使用着table布局,今天简单的说说“div布局和table布局对SEO的影响” 当div+css突然出现在网页设计行业的时候,官方、民间无不推崇备至,仿佛table设计的时代就要终结...,马上就要步入div+css的时代,不懂得div+css你都不好意思说你会网页设计,不知div+css你都不好意思说你是站长,你要还是用table来设计站点,无数鄙夷之光就投射而来。...使用div+css布局,页面代码较为精简,代码精简所带来的直接好处有两点: 一是标准化的页面结构:     有利于统一设计管理,可以得到搜索引擎良好的支持。...这仅仅是针对做网站来说,情况根据开发者技术而定,但是对于搜索引擎而言,div+css更能优化的进行爬行和收录,哦对了还有最为重要的一点: 基于XTHML标准的DIVCSS布局,一般在设计完成后会尽可能的完善到能通过...建议建站或改版的朋友们,技术许可的情况下,还是选择div+css布局为好。

69230

css经典布局——圣杯布局

圣杯布局和双飞翼布局一直是前端面试的高频考点,圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。...比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。...圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定。 中间的container是一个三栏布局。 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。...中间的container是一个三栏布局。 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。...#footer 【3】grid布局 如上图所示,我们把body划分成三行四列的网格,其中有5条列网格线 给body

2.4K10
领券