使用div+css布局网站避免10大错误
CSS+DIV是网站标准中常用的术语之一,通常为了说明与HTML网页设计语言中的表格定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。那么使用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误:
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
有时候我们在写很多代码的情况下难免会忘记结束标签,这样就会导致整个网站出现一些运行的问题以及下一步的操作,所以要注意检查标签的书写,也可以用dreamweaver的验证功能检查。
2. 利用排除法确定错误发生的位置
如果在运行的时候出现某些问题,可以利用排除法,逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。
3. 利用border属性确定出错元素的布局特性
有时候我们不知道这个div 是在哪里,或者使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
4. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性,另外指定元素时尽量使用em而不是px做单位。
7. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
8. 要注意clear属性的使用
clear默认是有高度还有字体大小的,所以必要时要先将clear的数值设置为0,还有在每一个div结束的后面最好加上clear:both的属性,清楚div的浮动。否则在Firefox还有一些浏览器上面是会错位的。
9. 要注意margin、padding 默认是有一定的数值的?
在ul、body等一些地方时存在margin、padding 默认值的,所以要先将它们设置为0,避免导致网站布局的错误。
本文转自:http://www.gzhongqi.net/Website/45.html
相关文档:
第一章:应知道
1.1 DIV+CSS
的叫法是不准确的
我想凡是来到“这个专题”的同学,很大部分是冲着DIV+CSS来的,目的就是学习
DIV+CSS的,说的再直接一些就是学习如何用DIV+CSS布局页面,如何从一张图片制作成标准的DIV+CSS页面。
如果你看完第一段还没有发现错误的话,那你就很有� ......
上节课我们讲了一下Css通过什么方式去控制页面
,如果不记得,我来帮大家回忆一下,总共有四种方式行内方式、内
嵌方式、链接方式、导入方式,大家通过这四种方式就可以实现CSS
对HTML
页面样式的控制,如果要让这些样式对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需
要用到CSS选择器,HTML页面中的� ......
盒模型,是XHTML
+CSS
布局
页面中的
核心!是关系到设计中排版定位的关键,都遵循盒模型规范,例如<div>、<p>、<a>……盒模型包含
(外
边距)margin,(内边距)padding ,(内容)content,(边框)border。
下图是CSS盒模型的示意图
这些属性我们可以把它转移到我们日常生� ......
<html>
<head>
<mce:style type="text/css"><!--
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div. ......
注意事项:
了实现导航中的子导航与主导航在实现鼠标交互的同时,保持其相对位置一致,我们使用了对ul li{}使用了position:relative;使其定位方式转为相对定位。而对li ul{}即子导航采用了position:absolute;相对于导航的绝对定位方式,了其鼠� ......