滑动门技术制作不规则按钮

有时候美工脑残的设计了不规则的按钮或边框等，做网页的都知道那玩意实现起来很麻烦，美不美观也是因人而异

这次有个美工做了这么个按钮给我，我日他先人先，因为项目要国际化所以里面的文字是变化的不能用图片只能用滑动门技术了

实现方法如下

html代码：

<div><a href="javascript:void(0)" class="fSlideDoorA"><span id="searchABody" class="mapSlideDoorBody"><img width="15" height="15" src="/images/common/slideDoorRight.png"/><span>登录</span></span><span class="mapSlideDoorHead"><img id="searchAHead" width="13" height="25" src="/images/common/slideDoorHead.png"/></span></a>
</div>

css代码：

.mapSlideDoorBody{vertical-align:middle;height: 25px;float:left;background:url("/images/common/slideDoorBody.png") repeat-x;color:black;padding: 0 5px;cursor: pointer;
}.mapSlideDoorBody img{float:left;margin: 5px 5px 0 5px;padding: 0px;
}
.mapSlideDoorBody span{float:left;
}.mapSlideDoorHead{float:left;margin: 0px;height: 25px;padding: 0px;cursor: pointer;
}
.mapSlideDoorHead img{margin: 0px;padding: 0px;
}

图片和文字漂一下，可以实现垂直居中的效果，用完记得清一下

滑动门技术制作不规则按钮相关推荐

html css圆角按钮,CSS：CSS使用滑动门技术实现圆角按钮
使用滑动门技术实现圆角按钮,如图所示,背景图和效果图. 所谓滑动门,就是当按钮的状态改变时,移动背景图,显示不同的状态.此法简单有效,但缺点是不能纵向扩展.要处理纵向扩展,就要使用复杂的圆解技术,如4 ...
CSS中的滑动门技术
原文作者: Douglas Bowman 原文出自: A List Apart 中文翻译: 54player.com nobita 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许 ...
css html应用实例1：滑动门技术的简单实现
关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...
前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]
滑动门门技术所谓滑动门技术就是利用背景图片的分割,实现不同内容长度下,按钮的可伸缩性. 具体思路:根据文本自适应大小,我们可用两个独立的背景图像来创造它.一个在左边,一个在右边.把这两幅图像想象成两 ...
css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享发布时间:2009-10-15 12:48:01 作者:佚名我要评论可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...
css滑动门技术的应用,DIV+CSS滑动门技术简介
你对DIV+CSS滑动门技术的概念和使用是否熟悉,这里和大家分享一下,其实DIV+CSS滑动门技术是一种只需要鼠标悬停便可自动切换板块的JS特效,相信本文介绍一定会让你有所收获. DIV+CSS滑动门 ...
CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
HTML+CSS(精灵图)实现微信滑动门技术
微信滑动门技术为了使各种[特殊形状的背景]能够[自适应元素中文本内容的多少],出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强 ...
用CSS实现“滑动门”技术
在前几天无意中翻看网页代码的过程中,无意中发现了微信官网的nav里有一个很有意思的小细节.在跟着代码学习了一番,在网上阅读了相关资料,原来这就是传说中的滑动门技术. 接下来就来分享一下我个人对滑动门的 ...

滑动门技术制作不规则按钮

滑动门技术制作不规则按钮相关推荐

最新文章

热门文章