CSS 小结笔记之滑动门技术

lykops 发布于2019-04-23 13:22 / 1514人阅读

摘要：所谓的滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。大多数应用于导航栏之中，如微信导航栏具体实现方法如下首先每一块文本内容是由标签与标签组成标签只指定高度，而不指定宽度。

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

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

具体实现方法如下：

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标签中文本长度的变化将会带动背景图片的拉伸。

GPU云服务器云服务器通用滑动门 html多个滑动门 css滑动 css技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1785.html

CSS魔法堂：重拾Border之——更广阔的遐想

摘要：也就是说我们操作的几何公式中的未知变量，而具体的画图操作则由渲染引擎处理，而不是我们苦苦哀求设计师帮忙。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比...

lily_wang 2019-08-30 13:01 评论0 收藏0
CSS Variables学习笔记

摘要：注本文首发于个人博客学习笔记。最近看了下变量，又名自定义属性，跟大家分享一下我的学习笔记。使用自定义属性来设置变量名，并使用特定的来访问。二学习笔记声明调用声明方式变量声明的方式非常简单，如下，声明了一个名叫的变量。注：本文首发于个人博客《CSS Variables学习笔记》。最近看了下CSS Variables（CSS变量，又名CSS自定义属性），跟大家分享一下我的学习笔记。 ...

mudiyouyou 2019-08-29 15:11 评论0 收藏0
mip-semi-fixed 走走又停停

摘要：代码设计融合了业界两种实现方案，非下页面中通过更换实现，下的页面由于要特殊处理元素，所以会科隆一个节点，具体代码参考开源代码。子节点必选项需要滑动后悬浮的代码的容器，组件科隆的也是这个节点。写在前面 MIP 中悬浮元素的特殊情况其实组件上线已经有一段时间了，最开始看到这个需求是站长提交了一个这中功能的组件过来，不过看过代码立刻就想到了 MIP 页面的特殊性：从结果页打开的 MIP ...

yiliang 2019-08-20 15:31 评论0 收藏0
CSS魔法堂：重拾Border之——不仅仅是圆角

摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...

_Dreams 2019-08-30 13:01 评论0 收藏0
CSS 小结笔记之三种样式表

摘要：内部样式表内部样式表一般写在头部，在标签内用标签括起来。外部样式表外部样式表是单独将样式写到一个文件中，并在头部引用。使用外部样式表时要注意如果出现多重样式时样式覆盖带来的问题。CSS 引入共有三种方式：内部样式表，内联样式（行内样式）表，外部样式表，当然也可以使用多重样式内联样式内联样式表内联样式直接把样式卸载html代码行内，一般仅仅在此样式仅仅只在当前元素上应用时使用，其他...

李文鹏 2019-04-23 13:30 评论0 收藏0