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 - 滑动门技术的更多相关文章

  1. CSS——滑动门技术及应用

    先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋 ...

  2. css滑动门技术

    滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 &l ...

  3. CSS 滑动门案例

    一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...

  4. CSS 小结笔记之滑动门技术

    所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...

  5. css+html应用实例1：滑动门技术的简单实现

    关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...

  6. CSS——滑动门

    在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利 ...

  7. CSS滑动门

    如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...

  8. css滑动门制作圆角按钮

    之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...

  9. DIV+CSS滑动门效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. wordpress 修改默认分页条数

    哎,终于快做完了,今天弄了弄分页,真是网上扒的模板太高级了,把分页和导航的css和js冲突了,终于解决了, 然后有一个模板是三和一排显示的,其他的是单挑显示的,它默认10条,我寻思改成9条,找了半天, ...

  2. 城市间紧急救援 Dijkstra

    作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快速道路长度都标在地图上.当其他城市有紧急求 ...

  3. PS绘制Logo

    1. 2. 3. 4. 5. 6. 第2步点击“圆1”应点击图层左边的缩览图才能获取选区 7. 8. 9. 10. 11. 12.

  4. redis场景分析的很到位

    链接:http://www.zhihu.com/question/19829601/answer/88069207来源:知乎 1. MySql+Memcached架构的问题 实际MySQL是适合进行海 ...

  5. 让你的逼格瞬间提升的十个Python语法！

    Python 是一种代表简单思想的语言,其语法相对简单,很容易上手.不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了.本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并 ...

  6. numpy.eye() 生成对角矩阵

    numpy.eye(N,M=None, k=0, dtype=<type 'float'>) 关注第一个第三个参数就行了 第一个参数:输出方阵(行数=列数)的规模,即行数或列数 第三个参数 ...

  7. 解决前端项目启动时报错：Use // eslint-disable-next-line to ignore the next line.

    首先说一下这个问题产生的原因: 项目创建时设置了使用 eslint 进行代码规范检查. 解决办法: 找到webpack.base.conf.js文件,并且将下满这行代码注释掉. ...(config. ...

  8. 【PAT甲级】1063 Set Similarity (25 分)

    题意: 输入一个正整数N表示集合的个数(<=50),接着输入N行,每行包括一个数字x代表集合的容量(<=10000),接着输入x个非负整数.输入一个正整数Q(<=2000),接着输入 ...

  9. 「AT4741 [ABC132D] Blue and Red Balls」

    题目大意 给出一个长度为 \(N\) 的01串,其中有 \(K\) 个 \(1\),其他都是 \(0\),需要求出当着 \(K\) 个 \(1\) 分成 \(1\) 到 \(K\) 段每一个的方案数. ...

  10. 第四节：Vuejs组件及组件之间的交互

    一. 组件及其交互 1.组件的注册 (1).全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称,第2个参数是一个选项对象. 选项参数包括 data:必须是一个func ...