需求：

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

解决：

用一个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. 基于STM32F429的ADS1115驱动程序

    1.ADS1115中文资料:https://wenku.baidu.com/view/8bab101feef9aef8941ea76e58fafab069dc44e7.html?rec_flag=de ...

  2. Elasticsearch 6.x版本全文检索学习之聚合分析入门

    1.什么是聚合分析? 答:聚合分析,英文为Aggregation,是es除搜索功能外提供的针对es数据做统计分析的功能.特点如下所示: a.功能丰富,提供Bucket.Metric.Pipeline等 ...

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

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

  4. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  5. Cesium专栏-空间分析之剖面分析(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  6. 学习postman教程

    postman可以做什么 1.可以做单接口的测试 2.可以调试接口 3.对接口设置变量后,可以做多接口的测试,并输出报告 如何用postman调试接口 1.填写api地址 2.选择请求方式 3.输入a ...

  7. 使用STS4新建springboot项目

    1.配置maven,自定义setting文件和仓库,一定要用阿里云镜像地址下载依赖,官方太坑了,整了半天都没弄好,原来是下载太慢文件损坏 <mirror> <id>alimav ...

  8. CSP-S需备模板大全

    CSP-S需备模板大全 谨以此文祝愿自己\(CSP-S\,\,2019\,\,\color{red}{RP++!!}\) 算法 二分 while(l<r) { int mid=(l+r+1)&g ...

  9. 在Windows系统中安装matplotlib，需要注意的问题

    matplotlib的下载地址:https://pypi.org/project/matplotlib/#files 以python3.6为例,适合的版本matplotlib-3.1.1-cp36-c ...

  10. .NET Core 3.1 Preview 1 发布

    今天,我们正式发布 .NET Core 3.1 Preview 1..NET Core 3.1将是一个小版本,着重于Blazor和Windows桌面开发的功能改进,同时这也是.NET Core 3.0 ...