学习WEB标准总结的一些CSS/XHTML知识小结

作者:袖梨 2023-08-29

制作网页过程中,总会遇到一些CSS/XHTML的各种问题,下面大体的总结了下

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>

</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>

</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>

</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;

相关文章

精彩推荐