需求：

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，其中最大的问题是字数不同，如何做？

解决：

用一个a包含span来制作，字数放在span里面。

此时span里面字数多一点，也可以撑开盒子，实现这个效果。（用到了css spirit 精灵图和滑动门技术）

实例：微信导航栏代码

核心：

1. a 盒子里面包 span 盒子

2. a盒子里，调整背景图片位置，设置成：绿色左半边

2. span盒子里，也调整背景图片的位置，设置成：红色右半边，再span里面放文字，文字多，就自动撑开 （像滑动门推开的效果）

（所用到的背景图片如下：

）

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     a {

         margin: 100px;

         height: 33px;

         display: inline-block;

         background: url(images/to.png) no-repeat;

         color: #fff;

         text-decoration: none;

         line-height: 33px;

         padding-left: 15px;

     }

     span {

         display: inline-block;

         height: 33px;

         background: url(images/to.png) no-repeat right;

         padding-right: 15px;

     }

     </style>

 </head>

 <body>

     <a href="#">

         <span>你好我是测试字数特别多的首页导航</span>

     </a>

 </body>

 </html>

效果：

滑动门出现的背景---实例微信导航栏（a盒子里面包span盒子，文字写在span里）的更多相关文章

  1. Android学习笔记- Fragment实例 底部导航栏的实现

    1.要实现的效果图以及工程目录结构: 先看看效果图吧: 接着看看我们的工程的目录结构: 2.实现流程: Step 1:写下底部选项的一些资源文件 我们从图上可以看到,我们底部的每一项点击的时候都有不同 ...

  2. BootStrap 实现导航栏nav透明，nav子元素文字不透明

    在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...

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

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

  4. 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  5. 微信小程序导航栏，下面内容滑动，上册导航栏跟着滑动，内容随着导航栏滑动

    16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...

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

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

  7. css滑动门技术

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

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

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

  9. CSS - 滑动门技术

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

随机推荐

  1. C# 异步转同步 PushFrame

    异步转同步-PushFrame 本文通过PushFrame,实现异步转同步 首先有一个异步方法,如下异步任务延时2秒后,返回一个结果 private static async Task<stri ...

  2. C# IE环境 - 重置IE（ 注册表）

    IE设置,都可以通过注册表,修改.以下是一些常用的IE设置注册表修改~ 检查证书吊销 /// <summary> /// 检查证书是否吊销 /// </summary> /// ...

  3. 「SAP技术」SAP HU上面的'Obj.to Which HU Belongs'栏位初探

    SAP HU上面的'Obj.to Which HU Belongs'栏位初探 HU02,创建一个新的HU, 保存之, HU03显示这个HU 189141203942, 其'obj.to Which H ...

  4. [20191119]探究ipcs命令输出.txt

    [20191119]探究ipcs命令输出.txt $ man ipcsIPCS(8)                    Linux Programmer's Manual              ...

  5. 测试IP的一些网址

    http://httpbin.org/ip http://ip111.cn http://test.abuyun.com https://www.whatismybrowser.com

  6. 算法问题实战策略 GALLERY

    地址 https://algospot.com/judge/problem/read/GALLERY 分析 如图 显然是需要在 0 1 2三个点进行监控即可.(0 2 3 也可) 根据题意,不存在回路 ...

  7. 题解：P2130 狂奔的Wzf

    题目链接 solution 判断有无障碍的时候不需要以此枚举,利用前缀和,如果前缀为零证明没有障碍. 重复很多,写的很丑了,#3死活不过 #include<iostream> #inclu ...

  8. LG1879 「USACO2006NOV」Corn Fields 状压DP

    问题描述 LG1879 题解 设\(opt[i][j]\)代表前\(i\)行,且第\(i\)行状态为\(j\)的方案数. 枚举\(j\),再枚举\(k\),\(k\)为上一行的状态. 判断\(j,k\ ...

  9. LG5196 「USACO2019JAN」Cow Poetry 背包+乘法原理

    \(\mathrm{Cow Poetry}\) 问题描述 LG5196 题解 因为每句诗的长度一定是\(k\),所以自然而然想到背包. 设\(opt[i][j]\)代表到第\(i\)位时,结尾为\(j ...

  10. 小程序-API请求

    Page({ onLoad:function(){ // 在onLoad中调用发送请求的函数 this.getProList(); } getProList:function(){ var self= ...