CSS常見技巧及問題處理

來源:互聯網
上載者:User
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以外的瀏覽器對於大小寫是很敏感的。還有就是一定要以字母開頭。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.