學(xué)習(xí)WEB標(biāo)準(zhǔn)總結(jié)的一些CSS/XHTML知識(shí)小結(jié)

更新時(shí)間：2008年09月09日 13:22:41 作者：

制作網(wǎng)頁過程中，總會(huì)遇到一些CSS/XHTML的各種問題，下面大體的總結(jié)了下

15、在層次比較多的時(shí)候，如何更好的給class命名？舉例如下：

復(fù)制代碼代碼如下:

.index #mainContent .mainContent_right .mainContent_list2 h1 a{}

這是我剛給你做的頁面中，層次多的時(shí)候，使用的命名方式是不太好的。我現(xiàn)在才反映過來。
應(yīng)該簡化為：

復(fù)制代碼代碼如下:

.index #mainContent .right .list2 h1 a{}

為什么呢？為什么不怕right和list2會(huì)重復(fù)？
因?yàn)槲覀兦懊媸怯新窂降摹?
.index #mainContent 下面的 right
.index #mainContent .right下面的 list2
所以是不會(huì)重復(fù)的！~就沒必要
.mainContent_right .mainContent_list2
非在前面加個(gè)mainContent了！
16、對(duì)于兼容性，我的感受是，盡量把東西寫正規(guī)一些，就不會(huì)經(jīng)常出現(xiàn)兼容性問題。
比如ff下默認(rèn)字體和ie不一樣，但如果我們?cè)陂_始的時(shí)候就定義了字體，就不會(huì)看起來不一樣了。
ff下很多東西的padding和ie不一樣，但我們事先定義了padding為0，所以也會(huì)沒事。

17、類似a標(biāo)簽，或者其它 span等。如果不定義width的話，那么默認(rèn)就100%寬。如下：

復(fù)制代碼代碼如下:

如果我們?cè)O(shè)置了 a{float:left}后，他們?nèi)齻€(gè)會(huì)在一排顯示，并且100%寬，變成自適應(yīng)的寬，也就是里面有多少字符，就撐多大。
這個(gè)細(xì)節(jié)，在處理滑動(dòng)門效果的時(shí)候，比較有用。

18、什么是滑動(dòng)門。

簡單的說是一組按扭，每個(gè)按扭中的文字長度不一定。我又不想單獨(dú)切每個(gè)按扭的背景色，所以就使用滑動(dòng)門效果。讓其可以自適應(yīng)。
下面是一個(gè)例子：

復(fù)制代碼代碼如下:

<ul class="nav"> 
<li><a href="#">首頁</a></li> 
<li><a href="#">建站指南</a></li> 
<li><a href="#">網(wǎng)絡(luò)創(chuàng)業(yè)</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; 
} 

這里設(shè)置了兩個(gè)背景。 b01 是按扭的左面部分（包括中間），切的時(shí)候，切大一些。b02是按扭右部分（不包括中間）

把b02設(shè)置為不重復(fù)，水平居右。這樣一個(gè)可自動(dòng)伸縮的滑動(dòng)門就做好了。

19、這種情況下必須設(shè)置height

復(fù)制代碼代碼如下:

.list_title{ 
background:url(../images/list/06.gif); 
} 
.list_title span{ 
float:left; 
display:block; 
height:38px; 
} 

list_title是個(gè)div，因?yàn)榛谇懊嬷v的“能不給box 設(shè)置height和width就盡量不設(shè)置”的原則，我們沒有給list_title設(shè)置高度，希望通過其下面的span將其撐開。

但因?yàn)閘ist_title本身是沒有高度的，所以也就不會(huì)顯示background。

結(jié)果就是list_title的背景顯示不出。所以必須設(shè)置個(gè)height，height:38px;
但width就沒必要設(shè)置了，因?yàn)閐iv默認(rèn)的width是100%(好象所有可以設(shè)置width的元素，默認(rèn)width都是100%)
20、提前設(shè)置ul{list-style-type:none;} 居然是無效的~~

難道必須在每個(gè)ul中寫list-style-type:none;