`
todd_liu
  • 浏览: 63527 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

css+div要注意的地方【转】

阅读更多

当我们进行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:

  1. <!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;"  />
分享到:
评论

相关推荐

    css+div实战

    虽然内容只有几页,但是对初学者的认识和熟练者的积累上还是有点收获的。很多需要注意和自己忽视的地方

    Div+Css实现屏蔽效果

    其中要注意的地方: 【遮罩层的大小】1、用JS判断你的显示器分辨率,获取长与宽两个参数,将这两个参数赋给第二层的Div,作为他的长与宽的像素值,这样的话,无论在多大或多小的显示器上,都可以显示同样的效果 2、...

    网页切片自动生成DivCss软件-(PC+手机+公众号)全能版

    您是否还为花几个小时,甚至几天对网页效果图进行...特别注意:本软件快速切片有一定的规范,请按操作手册进行切片,如有不清楚的地方,请和客服人员联系! 本软件的切片基本规则:在大框里切小框,一层一层地深入。

    DIV+CSS布局也需要注意的SEO原则

    DIV+CSS网页布局有很多值得学习的地方,那么他对SEO有何影响呢,本文就SEO与DIV+CSS布局的关系,向大家描述一下DIV+CSS网页布局对SEO的四大影响,相信本文介绍一定会让你有所收获。

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    css中的计算函数calc在网站布局中一个示例

    使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格 。 calc 大大的增加了css的灵活性。给一些特殊的布局,提供了方便。 示例的显示的效果 使用cacl 布局的一个示例 想做个一个效果, 就是在 #div1 的...

    css 不兼容性问题小结

    这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可: .clear{ clear:both;} 此外,为了让...

    全功能的地方视窗综合网站源代码

    模版编辑中编辑CSS控制页面风格,注意不熟悉CSS都不要随意编辑。 二、系统特点: 周密策划、项目为先 "项目指导技术,技术服从项目",这是我们一贯秉承的原则,也是我们与其他系统开发商、网站建设公司的本质...

    IE6 两个div有间隙的问题(IE 3px bug)

    已存在解决方法:利用float和margin的负值偏移...要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以.)即可,这样在IE6和IE7中都能有效的显示。 实现:这里也采用上面参考中的例子,其中例子中的

    网页设计期末设计

    制作的网页需要具有title、logo、banner、footer等一般网页应具备的元素,title上应有网站名称和其它相关信息。(10分) 在适当位置放置一个导航栏,该导航栏可以有一级、二级或多级,...使用DIV+CSS技术布局排版(5分)

    mui ---- 搜索列表自定义

    5,添加你要添加的模块同时在模块的外层div加上data-group="xxxx"你导航处的名字 特别注意此处在utf-8的编码下可以是汉字,但是建议不要采取汉字 最后上边说的这几个地方在我的demo中都已修改好,你可以下载直接...

    出现问题a is defined高手帮忙

    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; src="http://ditu.google.com/maps?file=api&amp;v=2&amp; key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ- i1QfUnH94QxWIa6N4U6...

    艺帆国外外贸风格电子产品公司网站模板.rar

    ※ 全站DIV CSS ※ 自动伪静态.html结尾 ※ 关键词自动匹配设置 ※ 全面针对搜索引擎优化 ※ 图片批量上传,省去一张张上传的烦恼。 ※ 强大模板库和组件扩展 功能更强大 企业网站建设在进行网站设计的时候,...

    利用CSS3实现单选框动画特效示例代码

    注意,这个地方的黄点不是我们特效的一部分,这个黄点之所以存在是我使用的屏幕录制软件自带的。可以很清楚的看到这个特效就是当我们点击的时候,黑点会以一种缩放的动画显示出来,下面来看看具体如何实现。 复制...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Window的Target属性由字符串类型变为枚举类型,注意更新以前的代码:Target="_self" -&gt; Target="Self", Target="_parent" -&gt; Target="Parent"。 -MenuButton, LinkButton, Button, LinkButtonField的...

    jQuery完全实例.rar

    注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: &lt;img/&gt;&lt;img/&gt; jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果: [ , &lt;img src="test1.jpg" /&gt; ] ---...

    ExtAspNet_v2.3.2_dll

    -Window的Target属性由字符串类型变为枚举类型,注意更新以前的代码:Target="_self" -&gt; Target="Self", Target="_parent" -&gt; Target="Parent"。 -MenuButton, LinkButton, Button, LinkButtonField的...

    vue2配置scss的方法步骤

    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

    解读html5关于html5的应用与认识

    官方详细的文档是寻找 ...注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

    巨鲸CMS企业版 2.0.rar

    3.采用CSS DIV布局,符合SEO优化技术。 4.功能齐全,本CMS系统内含有留言系统。新闻发布系统。产品展示系统。招聘系统。CEO优化系统。友情链接系统等等。 5.使用完全免费无限制。 6.不含任何广告。 7.与其他PHP...

Global site tag (gtag.js) - Google Analytics