当我们进行CSS+DIV的方式来重构我们的
html页面时,通常会发现一些是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式
的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错
误。本文列举了一些常见的错误:
1.检查HTML元素(如:<ul>、<div>)、属性(如:class=”")是否有拼写错误、是否忘记结束标记
(如:<br />)
因为Xhtml 语法比较严格,诸如Firefox
之类的浏览器如果检查发现Xhtml里面有语法错误,那页面是不能正常显示的。即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的
验证功能检查一下有无错误。
2. 检查CSS
是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS
来检查 CSS
的拼写错误。CleanCSS
本
是为CSS减肥的工具,但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的着名的bug,倘若不知
道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。另外指定
元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性
(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式?
某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、
列表样式设置为none等。
10. 是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行DTD:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
另外的技巧:
1)input 文字 垂直居中,
<span>文字:</span><input name="n1" type="text" style="vertical-align:middle;" />
分享到:
相关推荐
虽然内容只有几页,但是对初学者的认识和熟练者的积累上还是有点收获的。很多需要注意和自己忽视的地方
其中要注意的地方: 【遮罩层的大小】1、用JS判断你的显示器分辨率,获取长与宽两个参数,将这两个参数赋给第二层的Div,作为他的长与宽的像素值,这样的话,无论在多大或多小的显示器上,都可以显示同样的效果 2、...
您是否还为花几个小时,甚至几天对网页效果图进行...特别注意:本软件快速切片有一定的规范,请按操作手册进行切片,如有不清楚的地方,请和客服人员联系! 本软件的切片基本规则:在大框里切小框,一层一层地深入。
DIV+CSS网页布局有很多值得学习的地方,那么他对SEO有何影响呢,本文就SEO与DIV+CSS布局的关系,向大家描述一下DIV+CSS网页布局对SEO的四大影响,相信本文介绍一定会让你有所收获。
1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...
使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格 。 calc 大大的增加了css的灵活性。给一些特殊的布局,提供了方便。 示例的显示的效果 使用cacl 布局的一个示例 想做个一个效果, 就是在 #div1 的...
这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可: .clear{ clear:both;} 此外,为了让...
模版编辑中编辑CSS控制页面风格,注意不熟悉CSS都不要随意编辑。 二、系统特点: 周密策划、项目为先 "项目指导技术,技术服从项目",这是我们一贯秉承的原则,也是我们与其他系统开发商、网站建设公司的本质...
已存在解决方法:利用float和margin的负值偏移...要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以.)即可,这样在IE6和IE7中都能有效的显示。 实现:这里也采用上面参考中的例子,其中例子中的
制作的网页需要具有title、logo、banner、footer等一般网页应具备的元素,title上应有网站名称和其它相关信息。(10分) 在适当位置放置一个导航栏,该导航栏可以有一级、二级或多级,...使用DIV+CSS技术布局排版(5分)
5,添加你要添加的模块同时在模块的外层div加上data-group="xxxx"你导航处的名字 特别注意此处在utf-8的编码下可以是汉字,但是建议不要采取汉字 最后上边说的这几个地方在我的demo中都已修改好,你可以下载直接...
<link rel="stylesheet" type="text/css" href="style.css"> src="http://ditu.google.com/maps?file=api&v=2& key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ- i1QfUnH94QxWIa6N4U6...
※ 全站DIV CSS ※ 自动伪静态.html结尾 ※ 关键词自动匹配设置 ※ 全面针对搜索引擎优化 ※ 图片批量上传,省去一张张上传的烦恼。 ※ 强大模板库和组件扩展 功能更强大 企业网站建设在进行网站设计的时候,...
注意,这个地方的黄点不是我们特效的一部分,这个黄点之所以存在是我使用的屏幕录制软件自带的。可以很清楚的看到这个特效就是当我们点击的时候,黑点会以一种缩放的动画显示出来,下面来看看具体如何实现。 复制...
-Window的Target属性由字符串类型变为枚举类型,注意更新以前的代码:Target="_self" -> Target="Self", Target="_parent" -> Target="Parent"。 -MenuButton, LinkButton, Button, LinkButtonField的...
注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: <img/><img/> jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果: [ , <img src="test1.jpg" /> ] ---...
-Window的Target属性由字符串类型变为枚举类型,注意更新以前的代码:Target="_self" -> Target="Self", Target="_parent" -> Target="Parent"。 -MenuButton, LinkButton, Button, LinkButtonField的...
1、安装文件 npm install --save-dev sass-loader npm install --save-dev node-sass 2、配置 webpack.base.conf.js 找到webpack.base.conf.js文件的module模块下面的rules添加以下代码 ... div
官方详细的文档是寻找 ...注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。
3.采用CSS DIV布局,符合SEO优化技术。 4.功能齐全,本CMS系统内含有留言系统。新闻发布系统。产品展示系统。招聘系统。CEO优化系统。友情链接系统等等。 5.使用完全免费无限制。 6.不含任何广告。 7.与其他PHP...