2天駕馭DIV+CSS （技巧篇）（轉）

 這是去年看到的一片文章，感受在個人學習中，有很多的影響。因而把它分享給想很快了解css的兄弟們。本文是技巧篇。

基礎篇
[知識一] 「DIV+CSS」 的叫法是不許確的
[知識二] 「DIV+CSS」 將你引入兩大誤區
[知識三] 什麼是W3C標準？
[基礎一] CSS如何控制頁面
[基礎二] CSS選擇器
[基礎三] CSS選擇器命名及經常使用命名
[基礎四] 盒子模型
[基礎五] 塊狀元素和內聯元素

實戰篇
[第一課] 實戰小熱身
[第二課] 浮動
[第三課] 清除浮動
[第四課] 導航條(上) | 導航條(下)
[大練習] 前四節課大練習
[第五課] 浮動佈局之結構設計 | 浮動佈局之表現設計
[第六課] 定位
[第七課] 定位應用
[第八課] CSS Hack

技巧篇
[單張圖片按鈕實例] 
[首行文字兩文字縮進]

 

【小技巧一】單圖片按鈕實例(CSS Sprites、CSS精靈)

        通常咱們作按鈕基本上都須要兩張圖片，一張正常狀態的圖片，一張按下去效果圖片，作這種按鈕思路就是，設置連接a的背景爲第一張圖片，a:hover的背景爲第二張圖片

代碼以下：

HTML代碼：

1. <a href="#" id="theLink"></a>

    

CSS代碼：

1. #theLink{
         display:block;/*由於標籤a是內鏈元素，因此利用這句話將內鏈元素轉化成塊狀元素，後面的width和height才起做用*/
         width:120px;
         height:41px;
         margin:0 auto;
         background:url(../images/normal.gif) no-repeat;
   }
   #theLink:hover{background:url(../images/press.gif) no-repeat;}

    

源代碼：   兩張圖片按鈕的源代碼.rar (6.18 KB, 下載次數: 1055) 


=========================================================


這節課，主要給你們介紹第二種思路，其實也很簡單，首先咱們將上面的兩個圖片合併成一張圖片，以下：

其次，將上面的圖片設置成按鈕的背景，最後，將a:hover的背景向上移動41個像素就OK了

HTML代碼：

1. <a href="#" id="theLink"></a>

    

CSS代碼：

1. #theLink{
         display:block;
         width:120px;
         height:41px;
         margin:0 auto;
         background:url(../images/buttonBG.gif) no-repeat;
   }
   #theLink:hover{background:url(../images/buttonBG.gif) no-repeat 0 -41px;}

    

這種圖片整合技術，就是CSS Sprites，也就是CSS精靈！

學到這裏，你們是否是能夠把 [第七課] 定位應用的例子用CSS Sprites實現呢？

源代碼：    單張圖片按鈕的源代碼.rar (5.4 KB, 下載次數: 1296) 

 

【小技巧二】CSS初體驗之首行文字縮進

記得過去剛開始學習製做頁面的時候，要想讓一段文字首行縮進兩個文字，以下圖:

      老是在前面加上8個「 」，由於過去你們對CSS不熟悉，這種方法實現雖然比較直接，可是文字多的時候會有不少「 」充斥在代碼中，代碼顯着比較亂，如今咱們實現這種效果就簡單多了，直接在CSS代碼中加入

1. text-indent:2em;

    

就很容易實現文本段落的縮進~

text-indent:2em;
解釋一下：text的意思是文本，indent在計算機英語中意思是縮進，至於後面的2em意思就是2個相對單位；

em又是什麼單位？
em這個單位的意思就是文字的高度，1em就是1個文字的高度，2em就是兩個文字高度，因此咱們寫的「text-indent:2em;」的意思就是，文本縮進2個文字的高度，由於漢字是方塊字，高度和寬度是同樣的，因此縮進2個文字的高度，就等於縮進兩個文字的寬度，最後的效果就是縮進了兩個文字。

【說明一點】
對於"text-indent:2em;"屬性，只能加在塊狀元素上面，內聯元素是不起做用的。

源代碼：  文本縮進.rar (68.34 KB, 下載次數: 545) 

 

 

原文地址：http://www.w3cfuns.com/portal.php?mod=topic&topicid=13