Css 单图片按钮实例(css 图片变换)
1.场景描述,根据鼠标的移动,动态的切换按钮图片。
2.方法1,准备两张120*41的图片,一张正常状态图片,一张按下效果图片。在鼠标放在的按钮上设置按下图片,移开又恢复到正常状态图片。缺点:在网页上按下的图片需要下载,会出现鼠标移动上去,未马上切换效果。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两张图片按钮实例</title>
<style type="text/css">
#theLink{
display:block;
width:120px;
height:41px;
margin:0 auto;
background:url(images/normal.gif) no-repeat;
}
#theLink:hover{background:url(images/press.gif) no-repeat;}
</style>
</head> <body>
<a id="theLink"></a>
</body>
</html>
3.方法2,整个设置一张图片,120*82,根据显示的需要,动态的截取显示尺寸。优势:在网页上可以一次下载完全一张图片,节约资料效率。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单张图片按钮实例</title>
<style type="text/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;}
</style>
</head> <body>
<a id="theLink"></a>
</body>
</html>
Css 单图片按钮实例(css 图片变换)的更多相关文章
- CSS 伪类 (Pseudo-classes)实例
CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...
- CSS实例:图片导航块
1.认识CSS的 盒子模型. 2.CSS选择器的灵活使用. 3.实例: a.图片文字用div等元素布局形成HTML文件. b.新建相应CSS文件,并link到html文件中. c.CSS文件中定义样式 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- div+css网页标准布局实例教程(二)
五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...
- div+css网页标准布局实例教程(一)
今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...
- PHP.5-DIV+CSS布局网站首页实例
DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
- [HTML/CSS]uploadify自定义按钮样式
概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你 ...
- 纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...
随机推荐
- GetType() 和typeof() 的区别
GetType() 非强类型,支持跨程序集发射,用来支持动态引用, A obja=new A(); Type t=obja.GetType() typeof() 强类型,静态的 Type t=type ...
- 第二节:AppDomain
CLR COM服务器初始化时,会创建一个AppDomain.AppDomain是一组程序集的逻辑容器.CLR初始化时创建的第一个AppDomain称为默认的AppDomain,这个默认的AppDoma ...
- win7旗舰版在安装vs2010后向sql2008添加SQL_Server_Management详解
原文地址:http://blog.csdn.net/bruce_zeng/article/details/8202746
- android几种定时器机制及区别
在android中,经常用到的定时器主要有以下几种实现:一.采用Handler与线程的sleep(long )方法二.采用Handler的postDelayed(Runnable, long) 方法三 ...
- 基于Elasticsearch进行地理检索,计算距离值
实现步骤: 1.定义属性 [Serializable] public class Coordinate { public double Lat { get; ...
- centos6.5适用的国内yum源:网易、搜狐
设置方法如下: 1,进入yum源配置目录cd /etc/yum.repos.d 2,备份系统自带的yum源mv CentOS-Base.repo CentOS-Base.repo.bak 下载163网 ...
- HTTP网页错误代码大全带解释
HTTP网页错误代码大全带解释 HTTP 400 - 请求无效HTTP 401.1 - 未授权:登录失败HTTP 401.2 - 未授权:服务器配置问题导致登录失败HTTP 401.3 - ACL 禁 ...
- randomize_va_space
proc/sys/kernel/randomize_va_space用于控制Linux下 内存地址随机化机制(address space layout randomization),有以下三种情况 0 ...
- LNMP下wordpress无法切换主题,只显示当前主题解决方法
最近在lnmp下发现wordpress后台无法切换主题,只能显示当前主题,开始还以为是文件没传完,又重置了一遍,还是一样.百度得知,原来军哥的LNMP安装包默认关闭了scandir函数,为了安全考虑. ...
- MongoDB学习笔记-数据库命令
概念 数据库命令(database command)是一种非常特殊类型的查询.文档的创建.更新.删除及查询都属于数据库命令的范畴,它还包含管理性的任务(比如关闭服务器和克隆数据库).统计数据及执行聚合 ...