需求：

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

解决：

用一个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. ASP.NET Core 3.0 使用 gRPC无法编译问题

    一.问题 创建了gRPC项目后,编译发现报错: 二.解决 1.检查项目路径是否存在中文 2.检查当前Windows用户目录是否为非英文字符,如果是则必须改为英文 修改方法: https://jingy ...

  2. Spring Boot 2.2.2.RELEASE 版本中文参考文档

    写在前面 在我初次接触MongoDB的时候,是为了做一个监控系统和日志分析系统.当时在用Java操作MongoDB数据里的数据的时候,都是在网上查找Demo示例然后完成的功能,相信大家也同样的体会,网 ...

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

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

  4. 关于mybtis 使用过程中发生There is no getter for property named 'id' in class 'java.lang.String' 错误

    今天在修改一个关于mybtis语句时,偶然发现的一个错误  There is no getter for property named 'id' in class 'java.lang.String' ...

  5. 前端知识体系-NodeJS相关】NodeJS基础知识全面总结

    NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象:所有模块都可以调用的 global:表示Node所在的全局环境,类似于浏览器的window对象. process:该对象表示 ...

  6. boostrap 学习笔记

    bootstrap : 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. 用于项目样式的快速搭建,真的是..特别快.. 随便找两个cdn引用就能使用了. https:// ...

  7. Django 注意知识点（一）

    本篇概述 Django Admin后台显示 多对多字段(如何) Django 模板 显示 多对多字段(如何) Django 将表单中上传的多对多字段存入数据库 (如何)   Django 上传文件 ( ...

  8. QJsonObject与QString转化封装

    经常使用QT的同学可能会发现有时候需要json字符串和json对象之间的转换,今天他来了,直接上代码: QString InfoBase::JsonToString(const QJsonObject ...

  9. ubuntu 桌面版， ssh 连接时使用，x转发进行使用 gnome-terminal 时出现：Error calling StartServiceByName for org.gnome.Terminal: Timeout was reached 错误

    当我按照这种情景使用时,出现了这种情况: 考虑着 gnome 桌面正在运行,可能是gnome-terminal 使用了工厂模式进行创建:查找gnome-terminal 文档,有如下解决方案: gno ...

  10. Linux：源代码安装及脚本安装的使用

    由于这两个安装方法比较少,就没有单独分开来写 源代码安装 源码安装的步骤 (1)对下载的码包进行解压 (2)进入解压目录执行 configure 命令做相关设置 (3)执行 make 进行编译 (4) ...