CSS 小结笔记之滑动门技术

所谓的滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时，背景看起来也会变长。

大多数应用于导航栏之中，如微信导航栏:

具体实现方法如下：

1、首先每一块文本内容是由a标签与span标签组成

<a href="#"><span></span></a>

2、a标签只指定高度，而不指定宽度。

3、a标签设置好背景图后，指定一个padding-left值，大小与左侧半圆大小相同，（这样保证左边背景不变，中间的背景进行拉伸即可）。

4、span标签同样指定该背景图片，不指定宽度，并且指定padding-right值将图片右半部分显示出来（这是要是定图片位置为右）

具体代码如下：

a {color: white;line-height: 33px;margin: 100px;display: inline-block;text-decoration: none;/* a不能给宽度 *//*  */height: 33px;background: url(Images/vx.png) no-repeat;padding-left: 15px;}a span {display: inline-block;height: 33px;background: url(Images/vx.png) no-repeat right;padding-right: 15px;}

span 的背景要指定为right

 <a href="#"><span>一</span></a><a href="#"><span>一句</span></a><a href="#"><span>一句话</span></a><a href="#"><span>一句长长的话</span></a><a href="#"><span>一句超级超级超级超级超级超级长的话</span></a>

显示结果为

可以发现随着span标签中文本长度的变化将会带动背景图片的拉伸。

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h1cbab&title=CSS 小结笔记之滑动门技术

CSS 小结笔记之滑动门技术相关推荐

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

CSS 小结笔记之滑动门技术

CSS 小结笔记之滑动门技术相关推荐

最新文章

热门文章