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: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

时间: 2024-11-02 14:14:46

DIV+CSS作网页容易犯的错误小结_经验交流的相关文章

非常漂亮的Div+CSS布局入门教程第1/5页_经验交流

在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局

DIV+CSS布局教程大全与pdf电子书 下载_经验交流

div+css布局入门 4XHTML下css+div布局总结. 6网页设计DIV+CSS--第1天:选择什么样的DOCTYPE. 9第一天 9什么是DOCTYPE 10我们选择什么样的DOCTYPE 10补充 10网页设计DIV+CSS--第2天:什么是名字空间 10网页设计DIV+CSS--第3天:定义语言编码 11网页设计DIV+CSS--第4天:调用样式表. 11外部调用样式表 11双表法调用样式表 12网页设计DIV+CSS--第5天:head区的其他设置. 12收藏夹小图标. 12为搜

DIV+CSS实现的滑动门菜单特效代码_经验交流

[2007-05-16] jb51.net,网页设计,网站制作建设,css学习,网页标准化 网络编程 [2007-05-16] jb51.net,网页设计,网站制作建设,css学习,网页标准化 脚本专栏 [2006-06-18] jb51.net,网页设计,网站制作建设,css学习,网页标准化 网页制作相关知识 [2007-05-16] jb51.net,网页设计,网站制作建设,css学习,网页标准化 实用技巧 [2007-05-16] jb51.net,网页设计,网站制作建设,css学习,网页

使用CSS框架布局的缺点和优点小结_经验交流

现在好多网站都用了div+css来布局网页结构,优点是速度快了,可负面影响呢,来看下面的分析前端时间写了一篇<利用CSS框架进行高效率的站点开发>,有不少朋友问我相关的问题.很早5key就在公司进行CSS框架的架构,也对不少朋友提出CSS框架的建议.效果是很明显的.当然,CSS框架有利也有弊,最近也看了一些相关的文章.一些感想,与大家分享.  CSS框架之利:  1.开发效率的提高.          如果你是一个企业建站的前端开发,相信在大部分时间里进行着同类站点的代码工作.定义好的框架可以

DIV和CSS排版中制作细线条的方法小结_经验交流

今天制作div的高度控制的时候发现IE下控制div的高度很小的时候无效,特意查了一下相关文章. 最终有了解决方案,参考下面文章: 如果要制作一条高度小于12PX(大约)的线条,在IE中会显示出高于实际高度的,看下面. 复制代码 代码如下: <style>  .line{  background: #CCCCCC;  height: 6px;  }</style>  <div class="line"></div>  可看出实际高度大于6P

div+css如何实现页脚的置底_经验交流

将一个对象定位在页面底部并随页面滚动 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

div+css页面布局的五个小技巧_经验交流

1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: 复制代码 代码如下: <textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="th

DIV+CSS设计网页时的常见错误处理技巧

以下是一些DIV+CSS设计网页时的常见错误处理技巧,希望能对大家有所帮助. 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否正确 检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误. 3. 确定错误发生的位置 假如错误影响了整体布局,则可以逐个删除div块,直到删除

比较详细的DIV+CSS布局网页对网站SEO的影响_网站应用

SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量