<html lang="en">

<head>
<meta charset="utf-8"/>
<title>Image Gallery</title>
<style type="text/css">
.btn1{display:inline-block; background:url(./sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(./sina_gray_btn.png) no-repeat right top;}

.btn1:hover{background-position:0px -28px}
.btn1 cite:hover{background-position:0px -28px}

</style>
</head>
<body>
<div id="div1">
<a href="javascript:" class="btn1"><cite>block方法block方法</cite></a>
</div>
<div style="position:relative;top:200px;width:200px;height:200px;border:2px solid #ddd">
<img src="sina_gray_btn.png"/>
<div>

</body>
</html>

CSS| 實例---寬度自由調節button,圖片切換的更多相关文章

  1. IE6 中的最大最小寬度和高度 css 高度 控制(兼容版本)

    /* 最小寬度 */.min_width{min-width:300px; /* sets max-width for IE */ _width:expression(document.body.cl ...

  2. SpringMVC常用注解實例詳解3：@ResponseBody

    我的開發環境框架:        springmvc+spring+freemarker開發工具: springsource-tool-suite-2.9.0JDK版本: 1.6.0_29tomcat ...

  3. RTX的api開發實例

    RTX的api開發實例 最近接觸了RTX的接口開發部份,RTX其实有很多玩法,除了可以用自帶的客戶端發消息之外還可以用PHP調用API的方式來做一些事情,下邊整理了一下分享給大家 值得提醒的是这些接口 ...

  4. BPMN 學習實例

    什麼是業務流程圖? What is BPMN 業務流程建模符號(BPMN)是業務流程建模的一種方法.它基於統一建模語言(UML)中活動圖的概念,以圖形符號(業務流程圖)支持業務流程的規範.BPMN為企 ...

  5. 用例圖學習實例 / Learning Use Case Diagram by Examples

    什麼是用例圖? 用例描述了一個演員和感興趣的系統之間的一系列交互,以達到某種特定目標,並由某種觸發事件引發.用例滿足需求或為演員解決問題.用例圖包含一組用例,可以通過從每個角色的不同角度講述系統將如何 ...

  6. redshift 調節螢幕色溫 保護眼睛

    // install redshift sudo apt-get install redshift // 調節 5000K 色溫 redshift -O 5000 // reset 色溫 redshi ...

  7. SpringMVC常用注解實例詳解2：@ModelAttribute

    我的開發環境框架:        springmvc+spring+freemarker開發工具: springsource-tool-suite-2.9.0JDK版本: 1.6.0_29tomcat ...

  8. 簡單SQL存儲過程實例

    簡單SQL存儲過程實例 摘自:http://blog.csdn.net/libra6956/article/details/5589173 实例1:只返回单一记录集的存储过程. 银行存款表(bankM ...

  9. windows批处理實例

    實例: 假設我們有個資料夾為d:\tmp和e:\tmp ,而我們只要將d:\tmp中有異動的檔案複製到e:\tmp下的話,用法如下 xcopy d:\tmp\. e:\tmp\ /D /S /Y 實例 ...

随机推荐

  1. js便签笔记（5）——Dean Edwards大牛的跨浏览器AddEvent()设计（不知道是不是jQuery事件系统的原型）

    1. 前言: 在看Aaron的jquery源码解读时候,看到事件系统那块,作者提到了Dean Edwards的添加事件的设计,于是就点进去看了看.首先让我吃惊的是,代码非常少,寥寥几十行,非常简单.于 ...

  2. 用Javascript开发网页截屏插件

    实现思路用html2canvas.js将元素转换成canvas,在将canvas转成图片. html2canvas(document.body, { onrendered: function(canv ...

  3. PostgreSQL查询优化简介

    简介 PostgreSQL查询优化器执行过程 语法分析:生成查询树 语义检查:对SQL表达的语义进行检查 查询优化 视图重写 逻辑优化:子查询优化,条件化简,等价谓词重写,连接消除,得到逻辑计划 物理 ...

  4. es6学习笔记11--Proxy和Reflect

    Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy可以理解成,在目标对象之前 ...

  5. es6学习笔记6--Generator 函数

    基本概念 Generator函数有多种理解角度.从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部状态. 执行Generator函数会返回一个遍历器对象,也就是说,Gen ...

  6. UVa Dropping Balls

    题目链接: https://cn.vjudge.net/problem/UVA-679 /* 问题 输入完全二叉树的层数D和有几个小球滚落,计算最后一个小球落入的叶子结点的小号. 解题思路 直接模拟超 ...

  7. zoj Beautiful Number（打表）

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2829 题目描述: Mike is very lucky, as ...

  8. vs code 插件收集

    名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 ...

  9. IDEA@Data注释使用

    @Data注解主要是帮助解决Setter 和 Getter以及 toString这种重复的无脑工作 加入@Data注解可以直接帮助我们添加实体类相应的Setter 和 Getter以及 toStrin ...

  10. redis-java基础操作

    安装 windows版的Redis,打开即可,默认端口6379 导入两个jar包  commons-pool2-2.3.jar   jedis-2.7.0.jar 一 写配置文件 redis.setM ...