CSS常見技巧及問題處理

1.解決背景不能延伸的問題
<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>

上面的問題，背景的自適應高度並不繼承float的高度，解決辦法：
在所有float下方加上<div style="clear:both;"></div>

2.網頁如何置中對齊？
body{ margin:0;padding:0;text-align:center;}
#container{width:760px;margin:0 auto;text-align:left;position:relative;}

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

3.用CSS製作滑鼠經過映像
用DW（Dreamweav）中的“滑鼠經過映像”當網速不太快的時候，滑鼠經過後的圖片還沒有下載下來，看到白圖的現象，看上去很不美觀。事實上用CSS就可以解決這個問題，並且非常的簡單，下載快，不會出現滑鼠經過後的圖片還沒有下載下來這種情況。

4.結構中id與class的使用原則與技巧
ID與CLASS的使用原則
據說W3C對於ID與CLASS的設定是ID具有唯一性，CLASS具有普遍性。ID需要具有唯一性，並且盡量在外圍使用。而CLASS具有可重複性，並且盡量在結構內部使用。
ID與CLASS的提示 
A.子級的命名的包含父命名中的部分為開頭。這樣方便在編寫CSS時明確層次關係。
B.CLASS中的子級最好不用ID。當然特殊情況特殊對待。
C.CLASS的命名最好命名用大小寫合用。例 .newMovie 這樣的寫法與第一條結合起來使用明確關係最合適。要需要注意的是IE以外的瀏覽器對於大小寫是很敏感的。還有就是一定要以字母開頭。

轉自：http://www.uxteam.com/myblog/article.asp?id=227