<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. Tomcat8源码编译及导入Eclipse中研究

    最近因为需求需要修改Tomcat中的某些功能,无奈只能研究那部分源码然后稍作修改. 目前Tomcat最新版是8.0,下载了源码包,编译并导入Eclipse中研究比较方便. 1. Tomcat8源码编译 ...

  2. SpringMVC之表单校验

    SpringMVC已经实现了对Java校验API(JSR-303)的支持,通过使用该API可以实现对数据的校验.要使用SpringMVC的Java校验API并不需要任何配置,只要引入其实现即可.本文使 ...

  3. 利用latex制作个人简历

    转自: http://www.cnblogs.com/panpei/ 前些日子,有点无聊,就在网上逛逛技术大牛的blogs,发现很多大牛都喜欢用pdf版式的简历,发现这种版式的简历排版非常漂亮简洁.深 ...

  4. java Multimap

    实现 { "a": [ , , ], "b": [ , ] } 当然, HashMap<String, List<Integer>> 是 ...

  5. es6学习笔记3--解构和对象

    1.解构 在接收数据的地方(比如赋值的左边),解构使你使用模式去获取部分数据. 下面的代码是解构的一个例子: let obj = { first: 'Jane', last: 'Doe' }; let ...

  6. [Redis]Redis的数据类型

    存储String字符串,使用get,set命令,一个键最大存储512M 存储Hash哈希,使用HMSET和HGETALL命令,参数:键,值 例如:HMSET user:1 username taosh ...

  7. 我是菜鸟，我怕谁（hdu2520）

    我是菜鸟,我怕谁 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  8. LINQ to Objects系列(4)表达式树

    为了进一步加深对Lambda表达式的理解,我们需要掌握一个新的知识,Lambda表达式树,可能听名字看起来很高深和难以理解,但实际上理解起来并没有想象中那么难,这篇文章我想分以下几点进行总结. 1,表 ...

  9. HDU3440(差分约束)

    House Man Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  10. 第二十七天- 网络通信协议 TCP UDP 缓冲区

    1.网络通信协议 osi七层模型:按照分工不同把互联网协议从逻辑上划分了层级 socket层 2.理解socket: Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计 ...