<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. Java中的简单工厂模式（转）

    Java中的简单工厂模式 举两个例子以快速明白Java中的简单工厂模式: 女娲抟土造人话说:“天地开辟,未有人民,女娲抟土为人.”女娲需要用土造出一个个的人,但在女娲造出人之前,人的概念只存在于女娲的 ...

  2. POJ2418 Hardwood Species—二叉查找树应用

    1. Hardwood Species原题描述   Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 14326   Acce ...

  3. SpringCloud入门之eclipse新建maven子项目和聚合项目

    一.new maven project :  next 二.勾选 create a simple project  :  next 三.Group Id:项目的包路径 如com.test,之后创建的C ...

  4. 人人，金山西山居，腾讯互娱，微信，网易游戏offer及面经

    转自:http://www.itmian4.com/forum.php?mod=viewthread&tid=3985 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Of ...

  5. 监控prometheus

    一.prometheus-webhook-daingtalak github地址:[Releases · timonwong/prometheus-webhook-dingtalk · GitHub] ...

  6. 第一次项目上Linux服务器（六：Nginx安装及相关命令（转））

    1.下载nginx 方法一 wget http://nginx.org/download/nginx-1.11.6.tar.gz 方法二 http://nginx.org/en/download.ht ...

  7. js设计模式之发布/订阅模式模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...

  8. 基于vue实现一个简单的MVVM框架（源码分析）

    不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学 ...

  9. js设计模式总结4

    链模式 链模式:通过在对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用,从而简化多次调用该对象多个方法时的对该对象的多次引用. 具体不多说:主要是方法最后return this; 委托模式 ...

  10. HDU 1535 Invitation Cards(逆向思维+邻接表+优先队列的Dijkstra算法)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1535 Problem Description In the age of television, n ...