最常用和實用的CSS技巧
發(fā)布時間：2010-01-05 21:35:19 作者：佚名 
我要評論
我要評論最常用和實用的CSS技巧，不論是前臺美工還是后臺成員人員都需要注意的地方。
設(shè)置水平居中
大多數(shù)的網(wǎng)站目前都是固定寬度的。CSS代碼如下：
div#container {margin: 0 auto;}
.控制位置：絕對位置，相對位置
假如有兩個div
<div id='parent'>
<div id='son'></div>
</div>
將重要元素放置在屏幕中央
如果你希望將您想要的東西放在最中央，可以使用以下CSS：
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
您必須明確的指定寬度和高度，再把top和left屬性設(shè)為他們的一半，這樣就可以是這個部分回到屏幕的中心。
5.可以重復(fù)利用的規(guī)則
.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}
設(shè)置自己的CSS樣式表，就可以在您需要的時候直接的添加標(biāo)記即可。
6. 解決IE6 的浮動元素的雙倍邊距問題
對一個div設(shè)置了float:left 和 margin-left:100px 那么在IE6中，這個bug就會出現(xiàn)。您只需要多設(shè)置一個display即可，代碼如下：
div {float:left;margin:40px;display:inline;}
7.簡單的導(dǎo)航菜單
在您的設(shè)計中預(yù)設(shè)一個導(dǎo)航欄是非常有益的。可以讓別人對你網(wǎng)頁的主要內(nèi)容有一個大致的了解。第一次來的XHTML：
<div id="navbar">
<ul>
<li><a href="http://www.dbjr.com.cn">腳本之家</a></li>
<li><a >服務(wù)器</a></li>
<li><a >站長查詢工具</a></li>
</ul>
</div>
大多數(shù)的網(wǎng)站目前都是固定寬度的。CSS代碼如下：
復(fù)制代碼
代碼如下:div#container {margin: 0 auto;}
.控制位置：絕對位置，相對位置
假如有兩個div
復(fù)制代碼
代碼如下:<div id='parent'>
<div id='son'></div>
</div>
將重要元素放置在屏幕中央
如果你希望將您想要的東西放在最中央，可以使用以下CSS：
復(fù)制代碼
代碼如下:div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
您必須明確的指定寬度和高度，再把top和left屬性設(shè)為他們的一半，這樣就可以是這個部分回到屏幕的中心。
5.可以重復(fù)利用的規(guī)則
復(fù)制代碼
代碼如下:.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}
設(shè)置自己的CSS樣式表，就可以在您需要的時候直接的添加標(biāo)記即可。
6. 解決IE6 的浮動元素的雙倍邊距問題
對一個div設(shè)置了float:left 和 margin-left:100px 那么在IE6中，這個bug就會出現(xiàn)。您只需要多設(shè)置一個display即可，代碼如下：
復(fù)制代碼
代碼如下:div {float:left;margin:40px;display:inline;}
7.簡單的導(dǎo)航菜單
在您的設(shè)計中預(yù)設(shè)一個導(dǎo)航欄是非常有益的。可以讓別人對你網(wǎng)頁的主要內(nèi)容有一個大致的了解。第一次來的XHTML：
復(fù)制代碼
代碼如下:<div id="navbar">
<ul>
<li><a href="http://www.dbjr.com.cn">腳本之家</a></li>
<li><a >服務(wù)器</a></li>
<li><a >站長查詢工具</a></li>
</ul>
</div>
相關(guān)文章
- 這篇文章主要介紹了10個必備的CSS技巧總結(jié),隨看隨記,敬請收藏~需要的朋友可以參考下2015-06-29
- CSS是網(wǎng)頁設(shè)計師的基礎(chǔ)，對CSS的了解能使他們能夠設(shè)計出更加美觀別致的網(wǎng)頁。使用CSS技巧來巧妙地處理CSS是非常令設(shè)計師著迷的事情。在CSS的深海世界里有很多有意思的東西2013-04-09
- 層疊樣式表（CSS）是現(xiàn)代的網(wǎng)站設(shè)計不可或缺的重要組成部分，就像10年前那樣，沒有它網(wǎng)站就會顯得是丑陋的。隨著時間的推移，網(wǎng)絡(luò)中的CSS的教程質(zhì)量已有顯著的提高。2009-10-27
網(wǎng)頁制作中應(yīng)用的50個CSS技巧(國外)
幾乎可以肯定的CSS是最好的一個網(wǎng)頁設(shè)計的發(fā)展，因為第一次圖形的Web瀏覽器通過了關(guān)于大規(guī)模，凡表創(chuàng)建笨重，緩慢加載網(wǎng)頁，創(chuàng)建的CSS更加精簡和實用的網(wǎng)頁。2009-08-03- 網(wǎng)頁制作Webjx文章簡介：本文描述了一個在IE6下用import導(dǎo)入CSS的問題！ 在ie 6中可以先寫CSS再加import比如 p {} @import url("base.css");2009-04-02
- CSS在書寫過程中會一些小技巧，會省時省力，比如按字母順序來排列css、先標(biāo)記 后css等等，本文整理了一些，感興趣的朋友可以參考下希望對大家書寫css有所幫助2013-08-13
- 這篇文章主要介紹了CSS Hack技術(shù)介紹及常用的Hack技巧集錦,本文講解了什么是CSS Hack、常用的CSS Hack、IE6對!important的支持、IE6下的多選擇符等內(nèi)容,需要的朋友可以參考2014-10-08
CSS hack技巧之IE6，IE7，firefox顯示不同效果
區(qū)別不同瀏覽器的CSS hack寫法2010-03-06IE6、IE7和FF的最簡單的hack技巧-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
關(guān)于CSS HACK的文章在webjx.com中提及的也很多。 CSSer必須掌握的關(guān)于IE6、IE7和FF的最簡單的hack技巧。 FF瀏覽器 .test{ height:20px; background-co2008-10-17- 不同的瀏覽器對CSS的解析結(jié)果是不同的，因此會導(dǎo)致相同的CSS輸出的頁面效果不同，這就需要CSS Hack來解決瀏覽器局部的兼容性問題，本文給大家分享CSS常用技巧之CSS書寫技巧2016-01-12