中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

以下內(nèi)容不再屬于css屬性, 但暫時歸入屬性篇中.

鏈接(link): 在html里用<a></a>標明鏈接, 在css里用a作為鏈接的選擇器名.

css的缺點和它的優(yōu)點一樣明顯, 其最大的缺陷就在于網(wǎng)頁的動態(tài)表現(xiàn)不足, 在這一點上和Flash差距尤為突出.

好在css還是留了一手, 那就是鏈接的偽類選擇器, 所謂偽類就是指依賴于瀏覽器或是用戶的狀態(tài). 對于鏈接來講, 存在link, hover, visited, active四種狀態(tài), 即四種偽類選擇器: a:link(存在鏈接, 但無鼠標動作), a:visited(被點擊或訪問過), a:hover(鼠標懸停于鏈接上時的狀態(tài)), a:active(鼠標點擊與釋放之間的狀態(tài)).

css便是以這幾個偽類選擇器實現(xiàn)了其為數(shù)不多的動態(tài)效果. 目前最為常用的就是導航條和按鈕的動態(tài)顯示. 以下用一個動態(tài)按鈕的實例來說明這四個偽類選擇器.

1. 首先準備一副圖片(button.png), 如下圖(160px*240px), 其由四幅160px*60px的小圖自上而下排列而成.

2. 接著需要往你的本地調(diào)試文件夾(調(diào)試環(huán)境的建立方法參考屬性(1)中的說明)的index.htm中寫入html代碼, 如下:

<div id=”button”><a href=”#”></a></div>

3. 在style.css中寫入以下代碼:

body {background-color: #FFF;}
#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
#button a:link { background-position:0 0;}
#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}

可以看到如 Example2 的效果.

4. 代碼解釋:

<div id=”button”><a href=”#”></a></div>

在index.htm寫入如上代碼, 目的在于插入一個id名為”button”的盒子(div),且其內(nèi)含有一個鏈接<a href=”#”></a>.

#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}

在css文件中寫入以上代碼, 目的在于控制盒子中鏈接的表現(xiàn), 通過名為”#button a”的選擇器來實現(xiàn). 鏈接的寬高為160px*60px, 背景為圖片button.png.

在這強調(diào)一下display:block的作用. 由于在html文件中,鏈接<a href=”#”> </a>中沒有任何的內(nèi)容(content)填充, 如果沒有聲明”display:block”, 那么即使聲明了選擇器”#button a”的寬高, 瀏覽器也會因為html文件中沒有內(nèi)容而無法顯示鏈接. 所以”display:block”在這里的作用就在于強制瀏覽器顯示沒有內(nèi)容填充的鏈接. 

#button a:link { background-position:0 0;}

用偽類選擇器a:link聲明鏈接的背景圖片在左上角顯示, 即距離左邊和頂邊分別0, 0. 但由于已經(jīng)在選擇器 “#button a”中聲明了圖片位置, 此代碼可有可無.

#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}

用偽類選擇器a:hover聲明鼠標懸停時, 背景圖片上移60px, 而使排在第二位的綠色小圖片顯示出來;

用偽類選擇器a:active聲明在鼠標點擊與釋放之間的狀態(tài)時, 背景圖片上移120px, 而使排在第三位的紅色小圖片顯示;

用偽類選擇器a:visited聲明在鏈接被點擊或訪問過時, 背景圖片上移180px, 而使排在第四位的灰色小圖片顯示;

現(xiàn)在你基本了解了css動態(tài)按鈕的制作過程, 但以上css代碼還存在一個嚴重的缺陷, 相信你會很快發(fā)現(xiàn)問題所在——這個按鈕居然是一個”一次性按鈕“, 也就是說這個按鈕在點擊第一次后, 就一直顯示那個灰色小圖片, 你能想出解決方法嗎? 請在留言中指出.

答案會在下一篇文章中說明! 下篇將會涉及css的核心內(nèi)容——盒子模型, margin和padding屬性.(正文完)

本文鏈接：http://www.95time.cn/tech/web/2008/6007.asp　

出處：Jorux Notebook
責任編輯：moby

上一頁 css基礎(chǔ)教程屬性篇之三 [1] 下一頁

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。