DIV+CSS自学总结手册

学习WEB标准总结的一些关于CSS/XHTML知识http://www.webjx.com 更新日期：2007-09-02 00:10 出处：网页教学网 作者：1、很多兼容性问题，是因为不同标签在不同浏览器下有着不同的 padding margin默认值。所以可以事先定义 * { padding：0; margin:0;} 或者 ul,li,h1,h2,h3,h4,h5,h6,p,table,td,div,img,hr,dd,dt,span,a,dt,dd,ol{margin:0;padding:0;font-size:12px;} 2、关于布局，可以看dreamweaver cs3里的模板怎么写的，它的写法是最好的写法。大的布局，可以直接使用 dreamweaver cs3 里默认的那些模板。 然后去掉注释，就能用了。 3、适当的使用margin/padding，在调整box（盒子）中，元素位置的时候，使用box（盒子）的padding比较好。而不要使用，box内元素的margin。 原因是，box内元素使用margin的时候，会对box的margin产生影响，产生错位。 但在使用padding的时候注意一点： 比如本来 width:100px 的box,如果设置了padding-left:20px的话，那就要把width减去20px。 4、一个box，设置了border后，要把width减去border的粗。 比如width:100px 的box，左右有1px的边，那应该设置box width为98px。 5、在添加box的时候，能不给width和height的，尽量不给。 height可以靠内部的元素去撑开。 width不设置的话，一般默认就是100%宽。 6、同时给一个box设置背景图片和背景颜色的方法是，先设置背景图片，再设置背景颜色，代码如下： .bg {background:url(/images/blbian.gif) no-repeat} .style1 {width:100px;height:100px;background-color:#ebf1e5;} <div class="style1 bg"></div> 7、当float:left之类的东西写的太多，影响到周围，或者下面的元素的时候，尝试使用clear:both去清除。 <br class="clearfloat" /> .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } 8、在进行如下设置的时候<div style="height:3px"></div>，会产生兼容性问题。 ie6会出问题，你会发现，box不是3px高。 需要如下设置： font-size:1px; 才不会有问题。参考 dw cs3模板中 clearfloat中的写法，还会加上line-height:0px。不过我发现不加也是可以的。但加会更正规。 9、在给单行文字设置height的时候，要同时设置line-height。不然会有兼容性问题，文字会有小的错位。 10、使用ul li列表的时候，一定要给ul设置 list-style-type: none; 不然会产生兼容性问题。 ff下会出现原点，而ie下经常看不到。 11、在使用ul做列表的时候，不单可以写li ，还可以用dt和dd，但使用后要注意测试兼容性。我还没有总结出到底会什么问题。 12、在给标题加样式的时候，尽量用h1 h2 h3等...去做标题的标签。可以在文档前，先设置 h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;} 原因是，搜索引擎会对h标签包围的文字内容，给予更多的关注和重视。并且h本身就是为了给标题使用的。 13、关于css中常用的命名方式，见我的附加文档----常用的css命名.txt 14、在层次比较多的时候。尽量使用不同的标签去解决问题，而不用每个都给 class或者id。举例如下： <div class="t1"> <div class="logo"><img src="/images/logo.gif"></div> <ul class="nav"> <li><a href="#"><img src="/images/01.gif"><br />首页</a></li> <li><a href="#"><img src="/images/02.gif"><br />建站指南</a></li> <li><a href="#"><img src="/images/03.gif"><br />网络创业</a></li> <li><a href="#"><img src="/images/04.gif"><br />网页制作</a></li> <li><a href="#"><img src="/images/05.gif"><br />网页特效</a></li> <li><a href="#"><img src="/images/06.gif"><br />视频教程</a></li> </ul> </div> 这个其实可以简化： <div class="t1"> <div><img src="/images/logo.gif"></div> <ul> <li><a href="#"><img src="/images/01.gif"><br />首页</a></li> <li><a href="#"><img src="/images/02.gif"><br />建站指南</a></li> <li><a href="#"><img src="/images/03.gif"><br />网络创业</a></li> <li><a href="#"><img src="/images/04.gif"><br />网页制作</a></li> <li><a href="#"><img src="/images/05.gif"><br />网页特效</a></li> <li><a href="#"><img src="/images/06.gif"><br />视频教程</a></li> </ul> </div> 完全可以去掉这logo和nav这两个class 然后定义样式的时候 .t1 div img{border:0px;margin:10px} .t1 ul{list-style-type: none;width:80%;} .t1 ul li{height:22px;line-height:22px;} 就可以了。 15、在层次比较多的时候，如何更好的给class命名？举例如下： .index #mainContent .mainContent_right .mainContent_list2 h1 a{} 这是我刚给你做的页面中，层次多的时候，使用的命名方式 是不太好的。我现在才反映过来。 应该简化为： .index #mainContent .right .list2 h1 a{} 为什么呢？为什么不怕right和list2会重复？ 因为我们前面是有路径的。 .index #mainContent 下面的 right .index #mainContent .right下面的 list2 所以是不会重复的！~就没必要 .mainContent_right .mainContent_list2 非在前面加个mainContent了！ 16、对于兼容性，我的感受是，尽量把东西写正规一些，就不会经常出现兼容性问题。 比如ff下默认字体和ie不一样，但如果我们在开始的时候就定义了字体，就不会看起来不一样了。 ff下很多东西的padding和ie不一样，但我们事先定义了padding为0，所以也会没事。 17、类似a标签，或者其它 span等。如果不定义width的话，那么默认就100%宽。如下： <a>1111</a><a>2222</a><a>3333</a> 如果我们设置了 a{float:left}后，他们三个会在一排显示，并且100%宽，变成自适应的宽，也就是里面有多少字符，就撑多大。 这个细节，在处理滑动门效果的时候，比较有用。 18、什么是滑动门。 简单的说是一组按扭，每个按扭中的文字长度不一定。我又不想单独切每个按扭的背景色，所以就使用滑动门效果。让其可以自适应。 下面是一个例子： <ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">建站指南</a></li> <li><a href="#">网络创业</a></li> <li><a href="#">网页制作</a></li> <li><a href="#">网页特效</a></li> <li><a href="#">视频教程</a></li> </ul> .nav { list-style-type: none; height:70px; margin:0px 0px 0px 20px } .nav li{float:left;background:url(../images/b01.gif) no-repeat;margin-left:8px;margin-top:10px;} .nav a{ float:left; color:#4d7ecd; display:block; background:url(../images/b02.gif) no-repeat right top; height:40px; padding:0px 16px 15px 16px; text-align:center; } 这里设置了两个背景。 b01 是 按扭的左面部分（包括中间），切的时候，切大一些。b02是按扭右部分（不包括中间） 把b02设置为不重复，水平居右。这样一个可自动伸缩的滑动门就做好了。 19、这种情况下必须设置height .list_title{ background:url(../images/list/06.gif); } .list_title span{ float:left; display:block; height:38px; } list_title是个div，因为基于前面讲的“能不给box 设置height和width就尽量不设置”的原则，我们没有给list_title设置高度，希望通过其下面的span将其撑开。 但因为list_title本身是没有高度的，所以也就不会显示background。 结果就是list_title的背景显示不出。所以必须设置个height，height:38px; 但width就没必要设置了，因为div默认的width是100%(好象所有可以设置width的元素，默认width都是100%) 20、提前设置ul{list-style-type:none;} 居然是无效的~~ 难道必须在每个ul中写list-style-type:none;