css:滑动门
2015-09-08 11:21
686 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滑动门Demo</title> <style type="text/css"> .btn{height:28px; font-size:12px; text-decoration:none; line-height:28px;} .btn,.btn span{ float:left;background:url(btn.png) 0 0; color:#fff;} .btn span{background-position: right 0;padding: 7px 8px 5px 0;margin: 0 0 0 8px;height: 16px;line-height: 16px;} </style> </head> <body> <a href="#" class="btn"><span>这是大按钮</span></a> </body> </html>
相当于a负责左门,span负责右门
相关文章推荐
- CSS温故第二天【样式】-背景 文本 字体
- grunt合并压缩js、css文件
- CSS块级元素、内联元素概念
- Grunt:多个css,js,进行单独压缩
- CSS中的浮动和定位
- grunt学习(四)——css资源的合并和压缩
- 【CSS】自适应网页设计
- CSS字体中英文名称对照表
- 置换元素(替换元素)和非置换元素(不可替换元素)
- CSS-3 新弹性盒模型属性
- 自定义进度条\文字描边样式\文字上下滚动TextSwithcher的应用
- CSS层叠样式温故第一天
- CSS3:简易的循环弹跳动画
- CSS3:简易的循环弹跳动画
- CSS样式规范
- css定位浮动 &html 严格模式混杂模式
- 一个简单div+css来练习
- 让label中的不同字符显示不同的样式
- CSS3 遮罩蒙版效果 分栏效果
- 深入理解CSS3 Animation 帧动画