CSS常見(jiàn)技巧及問(wèn)題處理

1.解決背景不能延伸的問(wèn)題
<div id="content"><div id="main"> <div id="maincol"></div> <div id="xcol"></div></div><div id="subcol"></div></div>

<style type="text/css">
<!--
#content{width:700px; background:url(img/bg.png)repeat-y;}#subcol {float:left; width:200px;}#main {width:500px; float:right;}#maincol {width:300px;float:left;}#xcol {width:200px; float:right;}
-->
</style>

上面的問(wèn)題，背景的自適應(yīng)高度并不繼承float的高度，解決辦法：
在所有float下方加上<div style="clear:both;"></div>

2.網(wǎng)頁(yè)如何居中對(duì)齊？
body{ margin:0;padding:0;text-align:center;}
#container{width:760px;margin:0 auto;text-align:left;position:relative;}

說(shuō)明:body把margin與padding設(shè)置為0，這樣就把body內(nèi)容與瀏覽器邊緣親密接觸。然后text-align:center 把body的內(nèi)容全部居中，這樣就包括了#container也一起居中了。container的margin中的第一個(gè)0是上下、第二個(gè)auto是左右。上下為0左右讓其自控。再加上定位為相對(duì)，只有定位為相對(duì)的元素才可以有位置移動(dòng)！

3.用CSS制作鼠標(biāo)經(jīng)過(guò)圖像
用DW（Dreamweav）中的“鼠標(biāo)經(jīng)過(guò)圖像”當(dāng)網(wǎng)速不太快的時(shí)候，鼠標(biāo)經(jīng)過(guò)后的圖片還沒(méi)有下載下來(lái)，看到白圖的現(xiàn)象，看上去很不美觀。事實(shí)上用CSS就可以解決這個(gè)問(wèn)題，并且非常的簡(jiǎn)單，下載快，不會(huì)出現(xiàn)鼠標(biāo)經(jīng)過(guò)后的圖片還沒(méi)有下載下來(lái)這種情況。

4.結(jié)構(gòu)中id與class的使用原則與技巧
ID與CLASS的使用原則
據(jù)說(shuō)W3C對(duì)于ID與CLASS的設(shè)定是ID具有唯一性，CLASS具有普遍性。ID需要具有唯一性，并且盡量在外圍使用。而CLASS具有可重復(fù)性，并且盡量在結(jié)構(gòu)內(nèi)部使用。
ID與CLASS的使用技巧
A.子級(jí)的命名的包含父命名中的部分為開(kāi)頭。這樣方便在編寫(xiě)CSS時(shí)明確層次關(guān)系。
B.CLASS中的子級(jí)最好不用ID。當(dāng)然特殊情況特殊對(duì)待。
C.CLASS的命名最好命名用大小寫(xiě)合用。例 .newMovie 這樣的寫(xiě)法與第一條結(jié)合起來(lái)使用明確關(guān)系最合適。要需要注意的是IE以外的瀏覽器對(duì)于大小寫(xiě)是很敏感的。還有就是一定要以字母開(kāi)頭

服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)！虛擬主機(jī)域名注冊(cè)頂級(jí)提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]