css滑动门制作圆角按钮
之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多。
事实上是之前理解的滑动门的精髓不够到位。
现在有两种方式。
效果展示:http://runjs.cn/detail/evk8nkc8
先上传要用的两张图片吧。
btnBg.png bg.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑动门</title>
<style>
*{margin:; padding:;}
.btn{height:25px; background:url(bg.png) right top no-repeat; float:left; padding-right:10px;text-decoration:none; margin: 3px;}
.btn span{line-height:23px; height:25px; background:url(bg.png) left top no-repeat; float:left; cursor:pointer; color:#76381B; font-weight:bold; padding-left:10px; } .btn_02{margin-top:6px;display:block;}
.btn_02 span{display:block;}
.btn_02 .left{
width:3px;
height:24px;
float:left;
background:url(btnBg.png) no-repeat -1px;
}
.btn_02 .right{
height:24px;
float:left;
background:url(btnBg.png) no-repeat right -25px;
}
</style>
</head> <body>
<a href="#" class="btn"><span>阿斯达的点十分</span></a>
<a href="#" class="btn_02"><span class="left"></span><span class="right">阿斯达的点十分</span></a>
</body>
</html>
css滑动门制作圆角按钮的更多相关文章
- CSS——滑动门技术及应用
先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋 ...
- CSS - 滑动门技术
1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最 ...
- CSS 滑动门案例
一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...
- CSS——滑动门
在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利 ...
- CSS滑动门
如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...
- css滑动门技术
滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 &l ...
- WPF 制作圆角按钮
在程序对应坐置插入以下代码,或是先拖一个按钮控件到窗体中,再替换对应的代码. 修改 CornerRadius="18,3,18,3" 就可以改变圆角大小 按钮效果: <Bu ...
- js制作圆角按钮(兼容谷歌,ie7,ie8)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- DIV+CSS滑动门效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- C#拓展练习之模拟键盘录入
摘自<31天学会CRM项目开发<C#编程入门级项目实战>> 使用C#调用Windows API使程序模拟键盘输入,也可模拟按下快捷键.本例中,单击“模拟输入”按钮,可录入字符“ ...
- Normalize.css:优化重置CSS默认属性
Normalize.css:优化重置CSS默认属性 官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necol ...
- JavaScript 对象的几种创建方法
/** * Created by 2016 on 2016/6/4. */ function Box(){ var obj = new obj(); obj.name = "Lee" ...
- Convert.ToInt32()与int.Parse()的区别 (转载)
Convert.ToInt32()与int.Parse()的区别(1)这两个方法的最大不同是它们对null值的处理:Convert.ToInt32(null)会返回0而不会产生任何异常,但int.Pa ...
- SQL获取数据库中表的列名和列类型
select column_name as [字段名],data_type as [数据类型] from information_schema.columns where table_name='表名 ...
- javascript函数基础
Function类型 由于函数是对象,因此函数名实际上是一个指向函数对象的指针,不会与函数绑定 所以没有重载这个概念!!!!!!!!!!!!!!!!!!!!!!!!!! function sum1() ...
- php获取汉字首字母的函数
本文介绍用php实现汉字转化为首字母的方法,主要功能是:功能明确,易于修改维护和扩展: 英文的字串:不变返回(包括数字):中文字符串:返回拼音首字符: 中英混合串: 返回拼音首字符和英文. 网上的方法 ...
- ECshop网点程序优化-自动生成类目页Keywords、Desciption Meta
ECshop支持针对每个新建的类目自定义Keywords.Description Meta信息,好处就不用说了,帮助SEO或者让浏览者了解这是什么页面,但如果有几百个类目的时候,人工去写这些类目又有点 ...
- Python设计模式——外观模式
外观模式跟代理模式有点像,都是在client和目标的类之间建一个中间的类,client不直接调用目标的类,而是通过先调用中间类的方法,由中间类来实现怎么调用目标类. 代理模式用这种模式的目的是可以实现 ...
- Dev-C++之开启装逼效果
Dev-C++是个不错的C++IDE——在10年前,它是很不错,在现在,它是个以界面丑陋和调试像吃粑粑这两点著称,如下图.