CSS——滑动门技术及应用
先来体会下现实中的滑动门,或者你可以叫做推拉门:
滑动门出现的背景
制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办?
为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。
核心技术
核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的:
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
总结:
a 设置 背景左侧,padding撑开合适宽度。
span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。
之所以a包含span就是因为 整个导航都是可以点击的。
CSS——滑动门技术及应用的更多相关文章
- CSS - 滑动门技术
1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最 ...
- 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/ ...
随机推荐
- Elasticsearch索引别名使用
背景 项目中使用的老的索引,由于数据冗余,会想影响性能.因此需要重新建立索引,但是这样必然需要更新服务中的索引名称,然后重新启动服务,可能会对服务的使用者产生一定的影响.因此,调研了Elasticse ...
- 辞职信也要玩出高big
辞职信尊敬的各位公司领导:值此用人之际,不期请辞,实属不敬.历经四季,余以凡才,承蒙殊待,幸受公司各位领导知遇之恩,得以与诸位贤达公事.时光荏苒,吾经竭力而为,以图报效,虽幸遇领导执手相教,然资质愚钝 ...
- kubeadm生成的token重新获取
当你的token忘了或者过期,解决办法如下: 1.先获取token #如果过期可先执行此命令kubeadm token create #重新生成token#列出tokenkubeadm token l ...
- 如何运行linux shell程序
原文地址:http://www.sohu.com/a/138822796_610671 首先,我们从一个十分简单的例子test.sh开始吧: #!/bin/sh #this is a test. cd ...
- Winform 奇怪的 英文字体错乱显示问题
效果如图: 字体是Calibri 后来看了一下,我在vs设计器中为了预览效果定义了这些中文,然后在构造函数中将其改成英文,可能是已经为中文渲染出了位置?在改变就会冲突? 我的设计器 如何修改: 将vs ...
- leetcood学习笔记-70-爬楼梯
题目描述: 第一次提交:(超时) class Solution: def climbStairs(self, n: int) -> int: if n == 0 or n == 1 or n = ...
- java----int,string 转化为long
String: 1.返回Long包装类型: String str = "aaa"; long l = Long.parseLong([str]); 2.返回long基本数据类型: ...
- Java ArrayList使用技巧 - 两个ArrayList去除重复的元素
方法一.ArrayList中提供的removeAll方法(效率最低) List1.removeAll(mSubList); 方法二.双重循环(比方法一效率高) 双重循环分为内外两层循环,经过测试,将元 ...
- 【CSS】float
写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之 ...
- bzoj1003题解
[题意分析] 给你一张无向图,固定起点和终点,除这两点外每个点都有可能消失一段时间(保证起点和终点相互可达),每天选择的路径总长,以及对路径的修改都有代价,求给定时间内最小代价保证起点终点始终连通. ...