需求：

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

解决：

用一个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. PlayJava Day012

    今日所学: /* 2019.08.19开始学习,此为补档. */ JPanel和JFrame 1.JFrame是最底层,JPanel是置于其面上,同一个界面只有一个JFrame,一个JFrame可以放 ...

  2. ElementUI项目中怎样引用Jquery

    场景 使用ElementUI的快速开始的项目模板搭建Element项目后, 要在vue页面中使用jquery的语法. 这里直接使用$.ajax会提示$找不到. 注: 博客:https://blog.c ...

  3. Add a Class from the Business Class Library从业务类库添加类（EF）

    In this lesson, you will learn how to use business classes from the Business Class Library as is. Fo ...

  4. 用两种以上的 方式实现一个方法或者对象,调用时打印"你好xx",已定义的代码不能做修改,自己编译的不能出现"你好"? (Javasctript)

    先上代码 const obj = { say(){ Array.from(arguments).forEach(item=>{ console.log(`${this.str} ${item}` ...

  5. 【转载】从使用到原理学习Java线程池

    线程池的技术背景 在面向对象编程中,创建和销毁对象是很费时间的,因为创建一个对象要获取内存资源或者其它更多资源.在Java中更是如此,虚拟机将试图跟踪每一个对象,以便能够在对象销毁后进行垃圾回收. 所 ...

  6. Docker-核心笔记(含Dockerfile,Compose)

    Docker-核心笔记(含Dockerfile,Compose) 2017/03 Chenxin 参考 https://yeasy.gitbooks.io/docker_practice Docker ...

  7. coalesce搭配nullif使用

    with t1 as ( select NUll as col1, '' as col2, 'aaa' as col3 ) --关于COALESCE用法 当col1 为 Null时候返回 col2 依 ...

  8. 成功安装SQL Server实例后 无法找到SQL Server Configuration Manager工具的解决方案

    有一次成功安装SQL Server实例后 ,但是在所有程序中无法找到SQL Server Configuration Manager工具,以下步骤是我们当时的解决方案.最后成功将这个工具的转移到了桌面 ...

  9. Linxu：进程的管理与进程的延迟性&周期性调度

    进程的延迟与周期调度 进程的概念 进程:开始执行但是还没有结束的程序的实例 程序:包含可执行代码的文件 进程由程序产生,是一个运行着的.要占系统资源的程序,进程不等于程序. 进程分为:交互进程.批处理 ...

  10. 201871010102-常龙龙《面向对象程序设计（java）》第十四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...