需求：

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

解决：

用一个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. Kafka简明教程

    作者:柳树之 www.jianshu.com/p/7b77723d4f96 Kafka是啥?用Kafka官方的话来说就是: Kafka is used for building real-time d ...

  2. MacOS~jenkins里解决docker执行权限问题

    一 全局配置项设置 需要添加全局变量项,例如名称docker,路径/usr/local 添加一个jenkinsfile文件,用于运行docker命令 pipeline { agent any tool ...

  3. 为什么局部内部类中访问同一方法中的变量，该变量一定要是final修饰的

     最近有一个疑惑:为什么局部内部类中访问同一方法中的变量,该变量一定要是final修饰的         首先,我们看一个局部内部类的例子:             class OutClass {  ...

  4. ArcGIS Server 10.4切片图的制作与发布

    场景:有一张遥感卫星图,需要以切片图的形式发布 需要的资料:tif的格式遥感图像 发布步骤: 1.选择Service Editor-->Parameters-->Anti-Aliasing ...

  5. 升鲜宝V2.0_杭州生鲜配送行业，再论B端生鲜配送企业管理软件的开发与实施的难点与行业痛点_15382353715_余东升

    升鲜宝V2.0_杭州生鲜配送行业,再论B端生鲜配送企业管理软件的开发与实施的难点与行业痛点_15382353715_余东升 笔者简介:升鲜宝供应链管理软件平台创始人,14年软件从业经历,10多年深究生 ...

  6. kali安装openvas

    参考: https://blog.51cto.com/linhong/2134910?source=drh https://www.freebuf.com/sectool/133425.html ht ...

  7. 25个JavaScript数组方法代码示例

    摘要: 通过代码掌握数组方法. 原文:通过实现25个数组方法来理解及高效使用数组方法(长文,建议收藏) 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 要在给定数组上使用方法,只需要通 ...

  8. python--django for 循环中，获取序号

    功能需求:在前端页面中,for循环id会构不成连续的顺序号,所以要找到一种伪列的方式来根据数据量定义序号 因此就用到了在前端页面中的一个字段 forloop.counter,完美解决 1 <tb ...

  9. Druid-代码段-3-1

    所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应主流程3,新增连接的守护线程: //DruidDataSource的内部类,对应主流程3,用来补充连接 public class ...

  10. python直接赋值、浅拷贝、深拷贝的区别

    一:直接赋值 赋值,就是对象的引用,给对象起别名. i = 8j = iprint("值是:",i, "地址:",id(i))print("值是:&q ...