CSS网页布局参考.docx

详谈CSS网页布局中容易发生的错误编码随着CSS网页布局越来越普及，国内大部分网站已经采用CSS网页布局的制作方法。在应用DIV+CSS编码时很容易犯一些错误，这里列举一些常见的错误，帮助新手朋友更好的学习与进步。一、检查HTML元素是否有拼写错误 是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用Dreamweaver的验证功能检查一下有无错误。 　二、检查CSS是否正确: 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 　三、确定错误发生的位置: 如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 　四、利用border属性确定出错元素的布局特性: 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 　五、float元素的父元素不能指定clear属性: MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 　六、float元素务必指定width属性: 很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 　七、float元素不能指定margin和padding等属性: IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。 　八、float元素的宽度之和要小于100%: 如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 　九、是否重设了默认的样式? 某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。 　十、是否忘记了写DTD: 如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头。CSS布局:让页底内容永远固定在底部我们在设计一些页面内容甚少的网页时（典型应用就是登陆页面），由于显示器的分辨率大，在正常情况下，假如页面内容高度小于浏览器高度时，页面底部以下会留下很大的空间，不管浏览器的高度怎么变化，我们要想让页底内容始终固定在底部, 本文提供了一个CSS解决方案:XHTMLdiv id=wrap div id=main 主体 /div /div div id=footer 这里是页底footer内容 /divCSSstyle?type=text/css?*?{margin:0;padding:0;}??html,?body?{height:?100%;}?#wrap?{min-height:?100%;}?#main?{overflow:auto;??padding-bottom:?60px;}??/*?必须使用和footer相同的高度?*/?#footer?{position:?relative;??margin-top:?-60px;???height:?60px;??clear:both;??background:#369}??/*Opera?Fix*/?body:before?{?content:;?height:100%;?float:left;?width:0;?margin-top:-32767px;?}?/style?注意，以上代码在IE6上根本不起作用，必须使用以下代码来解决IE6下的BUG。!--[if?!IE?7]??style?type=text/css??#wrap?{display:table;height:100%}??/style?![endif]--?Fancybox丰富的弹出层效果Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果，相比facybox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。Demofancybox.rarFancybox具有以下特性：可以加载DIV、图片、图片集、Ajax数据、SWF影片，iframe页面等。支持键盘方向键和ESC键。丰富的参数设置和方法调用。可扩展性强。使用方法：添加javascript引用和css文件的引用link