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