当前位置: 网站建设 > 网页设计 > 建站经验 >

单图片按钮实例教程

时间:2013-03-02 03:57来源:未知 作者:admin 点击:

标签:单图片按钮实例教程 网站建设(1202)单图片(2)教程(56)实例(55)图片(50)按钮(19)
--> [网站建设之]单图片按钮实例教程 , 十大高权重分类信息网站 个别咱们做按钮基础上都须要两张图片,一张畸形状况的图片,一张按下去后果图片 做这种按钮思路就是,设置链接a的背景为第一张图片,a:hover的背景为第二章图片 代码如下: HTML代码: a id=theLink/a CSS代码: #theLink{ display:block;/*由于标签a是内链元素,所以应用这句话将内链元素转化成块状元素, 加深对HTML和CSS标签语义化的理解 ,后面的width跟height才起作用*/ wid
单图片按钮实例教程》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302339342013.htm
--> [网站建设之]单图片按钮实例教程 ,十大高权重分类信息网站

个别咱们做按钮基础上都须要两张图片,一张畸形状况的图片,一张按下去后果图片
做这种按钮思路就是,设置链接a的背景为第一张图片,a:hover的背景为第二章图片

   

代码如下:

HTML代码:
<a id="theLink",勾引百度蜘蛛 提高百度快照更新时间;></a>

CSS代码:
#theLink{
      display:block;/*由于标签a是内链元素,所以应用这句话将内链元素转化成块状元素,加深对HTML和CSS标签语义化的理解,后面的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;}

源代码:


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


这节课,重要给大家先容第二种思路,实在也很简略,首先我们将上面的两个图片合并成一张图片,如下



其次,将上面的图片设置成按钮的背景
最后,将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 -41px;} Tag:   按钮   实例   教程     按钮   实例   教程  
(责任编辑:网站建设)
单图片按钮实例教程相关文章
上一篇:十大高权重分类信息网站 下一篇:历数CSS缩写的一些好处
回到顶部