先来体会下现实中的滑动门,或者你可以叫做推拉门:

滑动门出现的背景

制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办?

为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。

核心技术

核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的:

 <li>
   <a href="#">
     <span>导航栏内容</span>
   </a>
 </li>

总结:

  1. a 设置 背景左侧,padding撑开合适宽度。

  2. span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。

  3. 之所以a包含span就是因为 整个导航都是可以点击的。

CSS——滑动门技术及应用的更多相关文章

  1. CSS - 滑动门技术

    1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最 ...

  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. zabbix--添加用户

    用户和用户组   概述 Zabbix 中的所有用户都通过 Web 前端去访问 Zabbix 应用程序.并为每个用户分配唯一的登陆名和密码. 所有用户的密码都被加密并储存于 Zabbix 数据库中.用户 ...

  2. python之pyquery 学习

    pyquery是jQuery的Python实现,可以用以解析HTML网页的内容.官网文档:http://pythonhosted.org/pyquery/ 下载:https://pypi.python ...

  3. C# 记录循环消耗时间

    今天写了循环段代码,但是感觉好像性能很差的样子,就想看一下整个循环的执行时间,最开始我想到了DateTime.Now,但是诡异的是,如果我循环的次数比较少的话(少于30000次)就会发现2次时间间隔是 ...

  4. Python with语句的概率,不多说了直接上代码!

    python中的with语句用于访问资源.它确保执行指定的__exit__(“清理”)操作,而不管释放被访问资源的处理过程中的错误或异常,例如读取和写入文件后自动关闭.线程中锁的自动获取和释放等. p ...

  5. DataWorks2.0的“业务流程”与1.0的“工作流”的对比

    DatwWorks终于升级2.0了,心情万分激动之余,又有一丝担忧.因为,没法再创建新的旧版工作流了...新版抛弃了“工作流”这个概念,引入了“业务流程”和“解决方案”两个新的概念.于是,作为团队Le ...

  6. 「题解」:x

    问题 A: x 时间限制: 1 Sec  内存限制: 256 MB 题面 题面谢绝公开. 题解 赛时想到了正解并且对拍了很久.对拍没挂,但是评测姬表示我w0了……一脸懵逼. 不难证明,如果对于两个数字 ...

  7. JavaWeb学习篇之----Jsp详解

    今天我们来看一下Jsp的相关知识,首先来看看一下Jsp的相关定义: 简介: JSP全称是JavaServer Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术 ...

  8. NX二次开发-UFUN将工程图中的点坐标映射到建模绝对坐标UF_VIEW_map_drawing_to_model

    #include <uf.h> #include <uf_ui.h> #include <uf_draw.h> #include <uf_view.h> ...

  9. ionic:目录

    ylbtech-ionic:目录 1.返回顶部 1. http://www.runoob.com/ionic/ionic-tutorial.html 2. 2.返回顶部   3.返回顶部   4.返回 ...

  10. SQL语句增加列、修改列、删除列

    SQL语句增加列.修改列.删除列 1.增加列: 1.alter table tableName add columnName varchar(30) 2.ALTER TABLE dbo.doc_exa ...