CSS - 滑动门技术
1. 概念：
1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。
1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
1.3 最常见于各种导航栏的滑动门。
2. 原理：
2.1 利用CSS精灵Sprite（主要是背景位置position）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
2.2 原背景图--> 切开左边 --> 剩下的右边随着文字的增多从左往右滑动(这也是文字增长的方向)
3. 具体做法：
经典布局：
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
3.1 a 设置背景左侧，padding撑开合适宽度。
3.2 span设置背景右侧， padding撑开合适宽度，剩下由文字继续撑开宽度。（文字增加的方向是从左到右）
3.3 之所以a包含span就是因为 整个导航都是可以点击的。
4. 例子1，自己实现微信官网导航栏效果
to.png
ao.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background: url(images/wx.jpg) repeat-x;
}
.nav li {
float: left;
list-style: none;
}
.nav a {
/*1. a 左边放 左圆角 但是文字需要往右走 15px*/
height: 33px;
line-height: 33px;
color: #fff;
text-decoration: none;
background: url(images/to.png) no-repeat left;
display: inline-block;
padding-left: 15px;
}
.nav span {
/* 2. span 右边放右圆角 但是文字需要往左走 15px，*/
background: url(images/to.png) no-repeat right;
display: inline-block;
height: 33px;
padding-right: 15px;
}
/* 凹下去， 第一个为左边，第二个为右边*/
.nav a:hover,
.nav a:hover span {
background-image: url(images/ao.png);
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">
<span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
</a>
</li>
<li>
<a href="#">
<span>第二个页面</span>
</a>
</li>
<li>
<a href="#">
<span>第三个页面</span>
</a>
</li>
</ul>
</body>
</html>
微信导航栏有特殊形状的背景：有凸起和凹下去的感觉。
微信导航栏使用滑动门技术自适应文字，使很长的文字都能有相同的背景(其实是有限制的，取决于背景图片的右侧长度)
CSS - 滑动门技术的更多相关文章
- CSS——滑动门技术及应用
先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋 ...
- css滑动门技术
滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 &l ...
- CSS 滑动门案例
一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...
- CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
- css+html应用实例1：滑动门技术的简单实现
关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...
- CSS——滑动门
在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利 ...
- CSS滑动门
如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...
- css滑动门制作圆角按钮
之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...
- DIV+CSS滑动门效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 解决<%@taglib prefix="s" uri="/struts-tags"%>显示找不到
问题: jsp中使用<%@taglib prefix="s" uri="/struts-tags"%>显示找不到 解决方法: 在web.xml中插入 ...
- php虚拟主机下实现定时任务（仅供参考）
因为要做简单的中控 在实现心跳包的时候遇到了困难 正常的心跳包思路是这样的 举个例子 我写一个登陆签到脚本 当我登陆成功的时候 会把登陆成功这个状态传递给网络上的中控端 当我签到完成的时候会把 ...
- 对 Element UI table中数据进行二次处理
(1)<el-table-column>标签加上 :formatter="dateFormat" <el-table-column prop="Star ...
- 【PAT甲级】1071 Speech Patterns (25 分)（getline（cin，x））
题意: 输入一行字符串,输出出现过次数最多的由字母和数字组成的字符串以及它出现的次数(对大小写不敏感,输出全部输出小写). AAAAAccepted code: #define HAVE_STRUCT ...
- 洛谷 P3865 【模板】ST表（模板）
嗯... 题目链接:https://www.luogu.com.cn/problem/P3865 ST(Sparse Table)算法,运用了倍增的思想. 我们令f[i][k]数组表示区间[i, i ...
- python加密算法及其相关模块的学习（hashlib,RSA,random,string,math）
加密算法介绍 一,HASH Hash,一般翻译做“散列”,也有直接音译为”哈希”的,就是把任意长度的输入(又叫做预映射,pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种 ...
- NAT穿透的方式
目前主要的NAT类型有如下几种: 1)Full-cone NAT, also known as one-to-one NAT 一旦一个内网地址 (iAddr:iPort) 被映射到一个外部地址 (eA ...
- 最长递增子序列-Hdu 1257
最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- SpringBoot Profiles特性
今天我们了解SpringBoot Profiles特性 一.外部化配置 配置分为编译时和运行时,而Spring采用后者,在工作中有时也会两者一起使用. 何为"外部化配置"官方没 ...
- 中山纪中Day1--普及
早上一起,扑面是瓢泼的大雨.跨过千山万水,来到纪中门前,毅然以一种大无畏的英雄气概跨进了考场. 面对四道神题.然后,我成功过五关斩六将,A掉了2道题!!! 收获:优先队列(大.小根堆) T1:APPL ...