2020-2-3 seo達人
邊框(border): css控制的邊框?qū)傩园╞order-width, border-color, border-style.
Border之所以讓人很困惑主要源于IE5錯綜復(fù)雜的BUG, 由于IE5是一個“will soon be dead” 的瀏覽器, 這里只例舉一個最為知名的關(guān)于border-width的BUG, 讓大家更好的理解border的含義, 先看下圖:
如上圖所示, 對象A(白色矩形)周圍有藍色邊框B, 可以看出A的實際寬度為ef, 而IE5不這么認為, 它把cd的長度定義為對象A的寬度, 這個bug在邊框的寬度小時幾乎察覺不到, 但在邊框與對象寬度相差不大時顯得尤為明顯.
新建一個前端學(xué)習(xí)qun438905713,在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者,大家相互幫助,相互解答,并且還準備很多學(xué)習(xí)資料,歡迎零基礎(chǔ)的小伙伴來一起交流。
現(xiàn)在, 結(jié)合以上說明, 可以看出border是獨立于對象之外, 位于magin與padding之間(后說明), 具有固定寬度, 顏色和樣式的區(qū)域.
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
可以看到如 Example2 的效果.
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)容填充的鏈接.
用偽類選擇器a:link聲明鏈接的背景圖片在左上角顯示, 即距離左邊和頂邊分別0, 0. 但由于已經(jīng)在選擇器 “#button a”中聲明了圖片位置, 此代碼可有可無.
用偽類選擇器a:hover聲明鼠標懸停時, 背景圖片上移60px, 而使排在第二位的綠色小圖片顯示出來;
用偽類選擇器a:active聲明在鼠標點擊與釋放之間的狀態(tài)時, 背景圖片上移120px, 而使排在第三位的紅色小圖片顯示;
用偽類選擇器a:visited聲明在鏈接被點擊或訪問過時, 背景圖片上移180px, 而使排在第四位的灰色小圖片顯示;
現(xiàn)在你基本了解了css動態(tài)按鈕的制作過程, 但以上css代碼還存在一個嚴重的缺陷, 相信你會很快發(fā)現(xiàn)問題所在——這個按鈕居然是一個”一次性按鈕“, 也就是說這個按鈕在點擊第一次后, 就一直顯示那個灰色小圖片, 你能想出解決方法嗎?
藍藍設(shè)計的小編 http://m.820esy.cn