DIV+css浏览器兼容入门

个人经验的DIV+css兼容性问题,入门级

浏览器前台布局笔记//学会css浏览器兼容入门//个人劳动成果

1，IE6，世界之窗，OP无法识别<hr>标签的color的简写。 如#FFC。必须用#FFFFCC，FF浏览器浏览器可以写为#FFC，建议中style=“color:#FFFFCC;”而不是直接用color=“#FFFFCC"。

2，p实际宽度在很多浏览器中是包括了”width+padding“不包括margin，margin只是两个p之前的位置距离，但是在嵌套p的时候，父p会被子p的margin宽度撑开，所以为了使多浏览器兼容，我们在p定位的时候，要把width设置得比实际宽度要短。即子p实际所占的宽度为width+padding+margin（注意，如果左右两边都有padding或者margin，那边其相应值应该*2），当然据说在IE5中，还包括border宽度，本人没亲自验证。

3，关于文件夹中文件以及图片的放置，外联css文件的经验：
对于网站导航条以上部分『banner ，nav，footer』的图片以及css控制全部写在一个basic.css中。这些部分包含的图片也要放在一个images文件夹中，该文件夹与首页index最好处于网站根目录下。
对于整个不同页面中的内容容器#box来说，不要放在basic.css中。因为每一个页面的box高度是不一样的，除非#box高度设置为auto。并且保证footer在不同的高度中会保持正确的位置。#nav导航条不要放在内容容器#box中，nav单独为一个DIv，与box最好是同级p。即nav的固定高度设置好，而box的固定高度为aotu。都居中，写个规则，#box，#nav,footer{ margin:10px auto; }，而不要把所有的内容都放在box中，这样高度不好控制。参考第10条。

4,通配符规则*{margin:0;padding:0;border:0;}很重要。这样就会防范在布局的时候，出现一些不确定因素。

5，同一功能不同页面的css写在一个css文件中，如search（搜索）功能，我们有好几个页面，一般有当没有搜索结果的页面，有搜索结果的页面，这时候两个是不同的页面，但是我们可以把它们的css样式都写在search.css中，有利于css管理。

6，对于同DIV布局属性，不同页面效果的，（如背景图片的变化），我们可以写了个css代码，如下：
#searchInfor { width:658px; height:60px; border:#FCF 1px dotted; padding-left:70px; background:url(../images/searchBG5.gif) no-repeat 18px;}
#searchInfor2 { width:658px; height:60px; border:#FCF 1px dotted; padding-left:70px; background: url(../images/nonoon.gif) no-repeat 18px;}
#searchInfor的背景图片为searchBG5.gif，而#searchInfor2的背景图片为nonoon.gif，这样运
用于一个页面的2种不同情况，如搜索有结果是，用背景图片一，而没搜索结果为0时，用背景图片二。我们可以用两个p 其id分别为searchInfor，searchInfor2。

7,对于display为block属性的h标签，要将其放在一个p中，不然h标签约束的文字不会自动换行

个人经验的DIV+css兼容性问题,入门级

，导致布局混乱。

8，对于内容少的p建议不写注释，如banner的左边的背景圆角图片。因为我们很容易找到这个p的开始处。不过给其他包含大内容的p块写注释是一个必不可少的工作。一定要认认真真得写好每一个p的注释。否则以后的修改维护是一个严峻的考验！

9，永远要记住，你写得代码，你以后要去面对它！！！而不是写了就写了！！所以一开始你就要保持头脑清楚，知道哪些代码放在什么地方，不要一开始就乱放，不然到后面后果只有一个：重新布局！

10，为了页脚能够随着其上面页面中的内容的增加而往下自动往下布局，必须给该页脚上面的p块box添加约束：overflow:auto;！当然一定要配合高度hight:auto;使用！！！！！很重要。

11，在细节布局上尽量少用padding以及margin，否则浏览器兼容有大问题。

12，做网页布局基本原则：从整体出发，首先寻找每个页面中的共同部分！把共同部分的css写出来！放在根目录的style文件夹中！
其中包括，不同区域的box布局css标签，链接标签a，hover，wisited等等，标题标签，h1,h2。h3……等等

13，在一个小的p中插入多个p一定要谨慎，最好采用包含的方式，而不是并列的方式，如历史访客的那个p，左边是访客的头像，右边是访客的相关信息，而头像与相关信息都包含在历史访客哪一个p块中，所以布局的方式建议用，一个p里面包含另外一个p，如，p1为一个浏览访问客户的容器，这个容器里面包含了访客的头像容器p2，而信息与p2一起被就放在p1中，不要单独建立一个p3，与p2并列在访客总体的p块中。即不是建两个p，一个float:righr,一个floart:left。具体参考木棉树下的个人首页的历史记录p布局。代码如下：
<p class="pageBorder" style="text-align:center;">
<p id="historyVisited">
<p id="historyVphoto"><img src="../image/midHead.gif" /></p><!--end historyVphoto--><img src="../image/onlineBoy.gif" width="16" height="18" /><a href="#">剑哥CEO</a><br><h2 style="">[2010.12.05-12:44]</h2></p><!--end historyVisited-->

14，小局部布局强烈建议用相对与绝对定位，而不建议用float！！！！！！！！！！！！！！！！！！！！！

15，对于一个p中插入少数的链接字时的定位时候，一般采用span标签比较理想。而不要为此在添加一个p。如：<span style="position:absolute; right:10px;"><a href="#">解除</a></span>。

16，外链js代码为<script src="js/find.js" type="text/javascript"></script>，而不是<link src="js/find.js" type="text/javascript">。外联cs
s才是<link href="style/find.css" rel="stylesheet" type="text/css" />。

17，关于gif图片，网站尽量用gif图片，在运用gif图片中有很多技巧，

个人经验的DIV+css兼容性问题,入门级

其实很多很绚丽的图片是可以通过gif表现出来的，可是为什么有一些图片就明显可以显示得很好的，颜色也不是很多的情况下，gif图片质量很差呢，原因有：图像选择较细，而背景是透明的情况下，gif很容易出现质量效果很差的情况，还有就是ps做图片的时候，对图也运用的一些效果，如外发光等等，其实这样做很容易影响图片的效果，我们可以采用多插入几个图层，在不同的图层中写如不同的颜色，多个过得就可以设计出效果很棒的gif图片来！

19，关于Png透明图片，尽量不要用png透明图片，因为IE6等浏览器不支持。

20，关于qq在线http://doc.guandang.net/pa?p=1:XXXXXX:5，xxxxx为你要查看的好友是否对你隐身可见的qq号码！返回值为online与offline。

21，关于ul，li的导航条，li规则中要有float：left，而li a要有display：block。很重要！！！如：
#nav ul li{ float:left; text-align:center; list-style:none;}
#nav ul li a{ display:block;width:50px; line-heig …… 此处隐藏：3350字，全部文档内容请下载后查看。喜欢就下载吧 ……