鏈接
:link 用來給沒有被訪問過的鏈接設(shè)定樣式
:visited 用來設(shè)定已經(jīng)訪問過的鏈接的樣式
:hover 動態(tài)偽類設(shè)定鼠標(biāo)停留處元素的樣式
:active 動態(tài)偽類用來尋找被激活的元素
由于偽類之間的特殊性是相同的,所以設(shè)定偽類樣式時需要注意順序。
合理的順序是:a:link,a:visited,a:hover,a:active 簡記為LoVe:HAte.
其中:link,:visited是A標(biāo)簽專用的,而:hover,:active等不限于A元素,也可以在其他某些元素上。
讓鏈接看起來酷酷的
<ps:這個其實沒有多少技術(shù)的東西在里面,關(guān)鍵是創(chuàng)意>
大家可以看看這里的例子: 示例下載
為鏈接添加有意義的修飾
1.標(biāo)識離開網(wǎng)站的鏈接
方案1:給相應(yīng)的鏈接加上一個適當(dāng)?shù)膱D標(biāo)來標(biāo)識鏈接的類型:比如該鏈接是否鏈接到網(wǎng)站外的地址;是否是一個email地址;是否啟動一個im請求甚至于標(biāo)識下載文件的類型等等。
改進(jìn)方案:每個鏈接都加的話太麻煩,維護(hù)起來也不方便??梢圆捎脤傩赃x擇器來幫助我們完成這樣的工作。
比如想這樣:
a[href^= "mailto"]{
background:url(email.png) no-repeat right top;
padding-right:10px;
}
但是IE6里面是不支持屬性選擇器的,只能變通一下:可以采用javascript+Dom的方式來完成??梢栽谶@個地方查看:http://simonwillison.net/2003/Mar/25/getElementsBySelector/
里面提到的SimonWillison寫的getElementBySelector方法。
大家可以看看這里的例子: 示例下載
把鏈接做的像按鈕
思路:將鏈接的可響應(yīng)事件的響應(yīng)區(qū)域擴大到整個背景區(qū)域,這樣看起來這個鏈接象是個按鈕。
實現(xiàn):其實很簡單只需要設(shè)置A標(biāo)簽的display:block就可以了。這樣的話A會一改自己的行內(nèi)元素的性質(zhì),轉(zhuǎn)換成一個塊元素。這樣就達(dá)到目的了。
問題:IE5.x如果不設(shè)置元素的width,height的話,即時設(shè)置了display:block也是沒有用的,所有要顯示的設(shè)置width,height的值。
大家可以看看這里的例子: 示例下載
圖像翻轉(zhuǎn)
方案1:簡單翻轉(zhuǎn):利用顏色的反差來形成翻轉(zhuǎn)效果。
方案2:具有圖像的翻轉(zhuǎn) 由于多圖片翻轉(zhuǎn)在第一次載入的時候回出現(xiàn)圖像短暫延遲的,造成閃爍效果。
改進(jìn)方案2:Pixy方法,替換圖片時顯示圖片不同部位。
利用這樣技術(shù)的一種應(yīng)用:標(biāo)識那些鏈接已經(jīng)被訪問過了,這個看起來還挺個性的。
大家可以看看這里的例子: 示例下載
純CSS工具提示
其實就是把預(yù)先設(shè)置好的提示信息隱藏了,在適當(dāng)是時機顯示在適當(dāng)?shù)奈恢谩?br /> 還是看例子來的實在。示例下載
平凡而簡單的人一個,無權(quán)無勢也無牽無掛。一路廝殺,只進(jìn)不退,死而后已,豈不爽哉!
收起對“車”日行千里的羨慕;收起對“馬”左右逢緣的感嘆;目標(biāo)記在心里面,向前進(jìn)。一次一步,一步一腳印,跬步千里。
這個角色很適合現(xiàn)在的我。