CSS 小结笔记之滑动门技术

所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时,背景看起来也会变长。

大多数应用于导航栏之中,如微信导航栏:

具体实现方法如下:

1、首先每一块文本内容是由a标签与span标签组成

<a href="#"><span></span></a>

2、a标签只指定高度,而不指定宽度。

3、a标签 设置好背景图后,指定一个padding-left值,大小与左侧半圆大小相同,(这样保证左边背景不变,中间的背景进行拉伸即可)。

4、span标签同样指定该背景图片,不指定宽度,并且指定padding-right值将图片右半部分显示出来(这是要是定图片位置为右)

具体代码如下:

a {color: white;line-height: 33px;margin: 100px;display: inline-block;text-decoration: none;/* a不能给宽度 *//*  */height: 33px;background: url(Images/vx.png) no-repeat;padding-left: 15px;}a span {display: inline-block;height: 33px;background: url(Images/vx.png) no-repeat right;padding-right: 15px;}

span 的背景要指定为right

 <a href="#"><span></span></a><a href="#"><span>一句</span></a><a href="#"><span>一句话</span></a><a href="#"><span>一句长长的话</span></a><a href="#"><span>一句超级超级超级超级超级超级长的话</span></a>

显示结果为

可以发现随着span标签中文本长度的变化将会带动背景图片的拉伸。

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h1cbab&title=CSS 小结笔记之滑动门技术

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371169.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用API​​身份验证的Spring Security

背景 尽管有许多博客文章详细介绍了如何使用Spring Security&#xff0c;但是当问题域位于标准LDAP或数据库身份验证之外时&#xff0c;我仍然经常发现配置挑战。 在本文中&#xff0c;我将介绍一些针对Spring Security的简单自定义&#xff0c;使其能够与基于REST的API调用一起…

java nlpir_4-NLPIR汉语分词系统-JAVA

好吧&#xff0c;之前用的是旧版的&#xff0c;现在出了个新版的&#xff0c;优先选择用新版的哈。从官网下载相应的开发包&#xff0c;然后主要需要找到这几个东西添加到项目工程里面&#xff0c;1.Data文件夹 2.NLPIR_JNI.DLL 3.NLPIR.jar 4.nlpir.properties添加完那些东西后…

vue error:The template root requires exactly one element.

error:[vue/valid-template-root] The template root requires exactly one element. 原因&#xff1a; 因为vue的模版中只有能一个根节点&#xff0c;所以在<template>中插入第二个元素就会报错 解决方案&#xff1a; 将<template>中的元素先用一个<div>…

测试驱动陷阱,第2部分

单元测试中单元的故事 在本文的上半部分 &#xff0c;您可能会看到一些不好但很流行的测试示例。 但是我不是一个专业评论家&#xff08;也被称为“巨魔”或“仇恨者”&#xff09;&#xff0c;没有任何建设性的话就抱怨。 多年的TDD教给我的不仅仅是事情会变得多么糟糕。 有许…

java 代码 设置环境变量_Java 配置环境变量教程

【声明】欢迎转载&#xff0c;但请保留文章原始出处→_→【正文】1、安装JDK开发环境开始安装JDK&#xff1a;修改安装目录如下&#xff1a;确定之后&#xff0c;单击“下一步”。注&#xff1a;当提示安装JRE时&#xff0c;可以选择不要安装。2、配置环境变量&#xff1a;对于…

组合数据类型练习,英文词频统计实例上(2017.9.22)

字典实例&#xff1a;建立学生学号成绩字典&#xff0c;做增删改查遍历操作。 sno[33号,34号,35号,36号] grade[100,90,80,120] d{33号:100,34号:90,35号:80,36号:120} print(d) print(每个学号对应分数:,d.items()) print(弹出35号的分数:,d.pop(35号)) print(获取学号:,d.key…

java中的math.abs_Java.math.BigDecimal.abs()方法

全屏Java.math.BigDecimal.abs()方法java.math.BigDecimal.abs()返回一个BigDecimal&#xff0c;其值是此BigDecimal的绝对值&#xff0c;其标度是this.scale()。声明以下是java.math.BigDecimal.abs()方法的声明public BigDecimal abs()参数NA返回值此方法返回的名为value&…

我需要多少内存

什么是保留堆&#xff1f; 我需要多少内存&#xff1f; 在构建解决方案&#xff0c;创建数据结构或选择算法时&#xff0c;您可能会问自己&#xff08;或其他人&#xff09;这个问题。 如果此图包含1,000,000条边并且我使用HashMap进行存储&#xff0c;此图是否适合我的3G堆&am…

mysql与串口通信_虚拟机串口与主机串口通信·小程序(下)

上次说到的&#xff0c;不能做到实时通信。那么开两个进程就可以了&#xff0c;一个用来监听是否有消息传来&#xff0c;一个用来等待用户输入。那么&#xff0c;先来复习一下进程的相关概念。进程结构linux中进程包含PCB(进程控制块)、程序以及程序所操纵的数据结构集&#xf…

Java规范请求中的数字

你们都了解Java社区流程 &#xff08;JCP&#xff09;&#xff0c;不是吗&#xff1f; JCP是为Java技术开发标准技术规范的机制。 任何人都可以注册该站点并参与对Java规范请求&#xff08;JSR&#xff09;的审查和提供反馈&#xff0c;并且任何人都可以注册成为JCP成员&#x…

自从我这样撸代码以后,公司网页的浏览量提高了107%!

欢迎大家前往腾讯云 社区&#xff0c;获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云 社区专栏 作者&#xff1a;yangchunwen HTTP协议是前端性能乃至安全中一个非常重要的话题&#xff0c;最近在看《web性能权威指南(High Performance Browser Networking)》&a…

立面设计模式–设计观点

在上一篇文章中&#xff0c;我们描述了适配器设计模式 。 在今天的文章中&#xff0c;我们将展示另一种类似的“四结构帮派”模式 。 顾名思义&#xff0c;结构模式用于从许多不同的对象形成更大的对象结构。 外观模式就是这样一种模式&#xff0c;它为系统内的一组接口提供了简…

Java第三次作业 1502 马 帅

《Java技术》第三次作业 &#xff08;一&#xff09;学习总结 1.书中对面向对象封装性的定义为&#xff1a;指把对象的属性和行为看成一个密不可分的整体&#xff0c;把不需要让外界知道的信息隐蔽起来。简单来说&#xff0c;就是定义的一些对象&#xff0c;只有在本类中才可以…

sass运算

sass具有运算的特性&#xff0c;可以对数值型的Value(如&#xff1a;数字、颜色、变量等)进行加减乘除四则运算。 请注意运算符前后请留一个空格&#xff0c;不然会出错。 scss.style css.style 本文转载于:猿2048https://www.mk2048.com/blog/blog.php?idiij12j&titles…

JavaOne 2012:NetBeans.Next –未来路线图

我从Continental Ballroom 4和一个NetBeans主题&#xff08; 项目Easel &#xff09;到Continental Ballroom 5&#xff0c;走了必要的几个步骤&#xff0c;以查看另一个面向NetBeans的演示文稿&#xff1a;“ NetBeans.Next –未来路线图”。 Ashwin Rao发起了“羽毛之鸟”&am…

C#复习正则表达式

由于前段时间为了写工具学的太J8粗糙 加上最近一段时间太浮躁 所以静下心来复习 一遍以前学的很弱的一些地方1 委托 public delegate double weituo(double a, double b);public static double test1(double a,double b){return a * b;}public static double test2(double a,…

在vue中安装使用vux

最近因为的工作的原因在弄vue&#xff0c;从后端弄到前端之前一直用js&#xff0c;现在第一次接触vue感觉还挺有意思的&#xff0c;就是自己太菜了&#xff0c;这个脑子呀。。。。不太够用。。。。。页面设计用了一个叫vux的东西&#xff0c;vux可以提供一些组件&#xff0c;用…

Zabbix全方位告警接入-电话/微信/短信都支持

http://www.cnblogs.com/baidu-gaojing/p/5128035.html 百度告警平台地址&#xff1a; http://gaojing.baidu.com 联系我们&#xff1a; 邮箱&#xff1a;gaojingbaidu.com 电话&#xff1a;13924600771 QQ群&#xff1a;183806029 对于使用zabbix的用户&#xff0c;要接入百度…

Spring MVC定制用户登录注销实现示例

这篇文章描述了如何实现对Spring MVC Web应用程序的自定义用户访问&#xff08;登录注销&#xff09;。 作为前提&#xff0c;建议读者阅读这篇文章 &#xff0c;其中介绍了一些Spring Security概念。 该代码示例可从Spring-MVC-Login-Logout目录中的Github获得。 它从带有注释…

HTML5与CSS3权威指南笔记案例1

第1章 <!DOCTYPE html> <meta charset "UTF-8"> <title> Search </title> <form> <p><label>Search&#xff1a;<input name"search" autofocus></label> </p> </form> <!DOCTYPE&…