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以外的瀏覽器對於大小寫是很敏感的。還有就是一定要以字母開頭。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。