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

滑动门出现的背景

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

为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了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. 防止DDOS攻击有效方法:隐藏服务器真实IP

    如今,网站服务器的安全受到越来越多的重视,但是难免会遇到黑客使用DDoS攻击网站,为了网站的安全通常都会做好防御,其中防止DDoS攻击有效方法:隐藏服务器真实IP ,该技术能够有效地保护网站的安全. ...

  2. 磁盘设备在 Linux 下的表示方法

    在 Linux 系统中磁盘设备文件的命名规则为: 主设备号 + 次设备号 + 磁盘分区号 对于目前常见的磁盘,一般表示为: sd[a-z]x 主设备号代表设备的类型,相同的主设备号表示同类型的设备. ...

  3. C#异步编程----async和await组合的写法

    微软示例: private async void StartButton_Click(object sender, RoutedEventArgs e) { // ExampleMethodAsync ...

  4. Red5流媒体服务器开发

    Red5流媒体服务器开发总结 Red5 是 支持Windows,Linux等多平台的RTMP流媒体服务器,最早属于谷歌下的开源项目,先已移植到Github,地址为https://github.com/ ...

  5. centos7 安装KDE

    下载安装了centos7 64位系统之后.初始化安装的是GNOME桌面系统.因为是按照鸟哥的Linux在学习,所以需要安装kde. 首先需要root权限. 打开终端. 输入su root密码.进入ro ...

  6. 安装apache的注意事项

    在安装apache的时候我们一般都会用yum一键安装,但是很少去考虑相关的依赖包有什么,所以今天特意做一个记录,方便以后编译安装的时候,进展顺利. yum install httpd Installi ...

  7. Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以implements(实 现)interface(接口

    匿名的内部类是没有名字的内部类.不能extends(继承) 其它类,但一个内部类可以作为一个接口,由另一个内部类实现

  8. nodejs route的简单使用

    demo var express=require('express'); var app=express(); var routeUser=express.Router(); var routeTea ...

  9. AES加密php,java,.net三种语言同步实现加密、解密

    话不多数上代码: java::: /* * To change this license header, choose License Headers in Project Properties. * ...

  10. Android Studio Download

    { https://developer.android.google.cn/studio }