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

DIV CSS制作网页时易犯的错误总结

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

本文主要包含div css网页布局,div css网页实例,div css网页布局代码,div css网页模板,div css网页等相关知识,佚名 希望在学习及工作中可以帮助到您
CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css div的方式实现各种定位。应用应用DIV CSS编码时很容易犯一些错误。本文列举了一些常见的错误:
  1. 检查HTML元素是否有拼写错误、是否忘记结束标记
  即使是老手也经常会弄错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:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> </div>

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

  • CSS在固定宽高的div内实现垂直居中的实例详解
  • div+css布局中选择使用html标签的方法
  • 使用div+css布局过程中在什么时候使用table呢
  • DIV CSS布局中position属性用法深入探究
  • CSS中让DIV居中的代码
  • div+css布局及Web标准对网站优化和SEO方面的益处
  • DIV CSS网页设计 有用的3个CSS技巧
  • DIV+CSS布局也需要注意的SEO原则
  • div+css布局中的alpha 不透明度使用说明
  • CSS网页实例 利用box-sizing实现div仿框架结构实现代码

相关文章

  • 2017-06-02div+css背景渐变色代码示例
  • 2017-06-02css line height深入理解
  • 2017-08-19怎样用最简单的html+css代码制作一颗跳动的心?
  • 2017-06-02控制DIV中文字绝对居中的简单方法
  • 2017-08-19css,html几个知识点
  • 2017-06-02CSS 实现div宽度根据内容自适应
  • 2017-06-02根据已知高和宽绝对垂直居中div示例代码
  • 2017-06-02关于CSS控制DIV水平居中问题
  • 2017-06-02如何处理小图标与文字混排的多种解决方案
  • 2017-06-02学习DIV+CSS网页布局之两列布局

文章分类

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

最近更新的内容

    • CSS属性简写整理
    • div 垂直居中的多种方法详细介绍
    • div+css布局及Web标准对网站优化和SEO方面的益处
    • 固定宽高的DIV如何绝对居中
    • 什么是DIV+CSS?有哪些优势?
    • 用HTML+CSS制作邮件网页的技巧总结
    • CSS 解决未知高度垂直居中实现代码
    • CSS网页实例 利用box-sizing实现div仿框架结构实现代码
    • div层被flash层遮盖问题解决思路
    • DIV多层嵌套margin-top的BUG问题

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

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