国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
CSS制作網(wǎng)頁技巧:單圖片按鈕實(shí)例

一般我們做按鈕基本上都需要兩張圖片,一張正常狀態(tài)的圖片,一張按下去效果圖片
做這種按鈕思路就是,設(shè)置鏈接a的背景為第一張圖片,a:hover的背景為第二章圖片



代碼如下:


HTML代碼:
<a id="theLink"></a>

CSS代碼:
#theLink{
      display:block;/*因?yàn)闃?biāo)簽a是內(nèi)鏈元素,所以利用這句話將內(nèi)鏈元素轉(zhuǎn)化成塊狀元素,后面的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;}

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


這節(jié)課,主要給大家介紹第二種思路,其實(shí)也很簡單,首先我們將上面的兩個(gè)圖片合并成一張圖片,如下

 

其次,將上面的圖片設(shè)置成按鈕的背景
最后,將a:hover的背景向上移動(dòng)41個(gè)像素就OK了

HTML代碼:
<a id="buttonBlock"></a>

CSS代碼:
#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;}
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
如何制作一個(gè)漂亮的 CSS 按鈕
CSS圖片翻轉(zhuǎn)菜單
VS2005中LinkButton樣式設(shè)置的技巧
CSS自適應(yīng)寬度按鈕
CSS 八種讓人眼前一亮的 HOVER 效果
【新浪博客中加入圖片\文字超鏈接的代碼】
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服