css 单照片按钮案例(css 照片转换)

日期:2021-01-20 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5


编码以下:

HTML编码:

拷贝编码
编码以下:

<a id="theLink"></a>

CSS编码:

拷贝编码
编码以下:

#theLink{
display:block;/*由于标识a是内链元素,因此运用这句话将内链元素转换成块状元素,后边的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;}

这节课,关键给大伙儿详细介绍第2种思路,实际上也很简易,最先大家将上面的两个照片合拼成1张照片,以下

其次,将上面的照片设定成按钮的情况
最终,将a:hover的情况向上挪动41个像素就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 ⑷1px;}

将会我讲到这里,你不可以彻底了解,没事儿
免费下载下来源于编码,保你1看就搞清楚
案例装包免费下载
上一篇:CSS学习培训之3 字体样式应用表明 返回下一篇:没有了