CSS制作网页技巧:单图片按钮实例


一般我们做按钮基本上都需要两张图片,一张正常状态的图片,一张按下去效果图片
做这种按钮思路就是,设置链接a的背景为第一张图片,a:hover的背景为第二章图片



代码如下:


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;}


源代码:两张图片按钮的源代码.rar (5.2 KB)

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


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

 

其次,将上面的图片设置成按钮的背景
最后,将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;}


可能我讲到这里,你不能完全理解,没关系
下载下来源代码,保你一看就明白源代码:单张图片按钮的源代码.rar (4.48 KB)



相关阅读:
dos 创建文件夹 md
PHP实例:上传多个图片并校验的代码
深入探讨PHP中的内存管理问题
MooTools 1.2介绍
CSS技巧:import与link的具体区别
两种办法不重装系统也能修复缺失文件
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
推动浏览器更新的原因和方法
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
实现lightBox时的样式与行为分离减少JS
HTML和CSS的关键:盒子模型(Box model)
将数据从MySQL迁到Oracle的几点注意事项
mayfish 数据入库验证代码
wait等待事件及其处理方法
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4