网页设计时CSS布局调试的有效方法

网页设计中CSS布局是很重要的部分,下面介绍几种检查调试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:http://www.w3.org/TR/html4/loose.dtd">

时间: 2024-09-28 09:52:03

网页设计时CSS布局调试的有效方法的相关文章

网页设计基础:Div+CSS布局入门教程

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

学习网页技巧:css布局中的居中问题

css|技巧|网页|问题 如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中:对于IE这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

网页设计时的“我就要他那样的”情景

网页制作Webjx文章简介:网页设计常见情景:"我就想要他那样的". 小孩子看见别人在吃冰棍,吵着妈妈:"我也要!""回家给你吃雪糕.""不,我就要他那样的!" 我就想要他那样的,"一个小孩子的幼稚需求",肯定有人会这么说.随着年龄的增长,它还是一个本能的需求,潜藏在内心里,只不过我们会用理智来抑制它的直接表达. 看到一个事物后,我们大致会有以下过程: 不管通过哪种途径,都是想获得"那样的&quo

CSS布局自适应高度解决方法

css|解决|自适应 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题. 先看代码: #wrap{ overflow: hidden; } #sideleft, #sideright{ padding-bottom: 32767px; margin-bottom: -32767px; }

四点网页版面设计(布局设计)的方法和技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站版面设计也可以理解为布局设计,版面就是在浏览器上显示的一个完整的页面,它是网站设计的重要内容.网站与用户的交互就是通过一个个页面来实现的,每个页面通常都包含了文字.表格.图像.动画.链接等诸多要素. 从表面上看,网页版面设计是一种关于排版的学问,而实际上,它不仅是一种技能,更是技术与艺术的高度统一. 网页版面设计的方法和技巧主要有以下几点

制作网页新闻框:CSS相对与绝对的方法

文章简介:CSS使用相对与绝对制作常用新闻框,JQuery附加标题前标点. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>

网页标准:CSS编写过程中常见的10个错误

css|标准|错误|过程|网页 对于初学CSS布局的人也许会有很大的帮助.有经验的开发者在调试CSS布局时也能得到些启发. 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否正确 检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误. 3. 确定错误发生的位置 如果错误影

网页设计网页布局教程:CSS布局新属性

文章简介:新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 这篇文章最早出现在 the April 2012 issue (226)这期的.n

DIV+CSS布局的网页对网站SEO的影响

css|seo|网页 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量有一定好处. 表格的嵌套问题 很多网站如何推广的文章中称,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎官方的证实.我的几项实验结果没有完全出来,但根据目前掌握的情况来看,spider爬行Ta