宽度自适应文字内容-滑动门

最新推荐文章于 2022-03-12 03:12:24 发布
最新推荐文章于 2022-03-12 03:12:24 发布
阅读量311 收藏
点赞数
分类专栏： 前端 微信小程序 文章标签： 前端 微信小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dianziagen/article/details/100114965
版权

改变宽度对比滑动门

<!--pages/f/f.wxml-->
<view>滑动门</view>
<view class="tap">
    <view class="item">1</view>
</view>
<view class="tap">
    <view class="item">123</view>
</view>
<view class="tap">
    <view class="item">123456</view>
</view>
<view class="tap">
    <view class="item">123456789</view>
</view>

<!-- 购物车数量适配 -->
<view class="tap-two">
    <view class="item-two">1</view>
</view>

<view class="tap-two">
    <view class="item-two">10</view>
</view>

<view class="tap-two">
    <view class="item-two">100</view>
</view>

<view>通过改变宽度进行适配</view>
<view class="bottom-container">
<view class="bottom-bage">1</view>
</view>
<view class="bottom-container">
<view class="bottom-bage two">11</view>
</view>
<view class="bottom-container">
<view class="bottom-bage three">111</view>
</view>

/* pages/f/f.wxss */

/*撑开展示左边的圆角*/

.tap {
    display: inline-block;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    height: 66rpx;
    padding-left: 30rpx;
    line-height: 66rpx;
    color: #fff;
    margin: 10rpx;
}

/*撑开展示右边的圆角*/

.item {
    display: inline-block;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    background-position: right;
    height: 66rpx;
    padding-right: 30rpx;
    line-height: 66rpx;
}

/*撑开展示左边的圆角*/

.tap-two {
    display: inline-block;
    box-sizing: border-box;
    /* background: #00f; */
    background: #f00;
    height: 60rpx;
    line-height: 60rpx;
    padding-left: 20rpx;
    font-size: 26rpx;
    color: #fff;
    margin: 10rpx;
    border-radius: 50%;

}

/*撑开展示右边的圆角*/

.item-two {
    display: inline-block;
    box-sizing: border-box;
    background: #f00;
    height: 60rpx;
    line-height: 60rpx;
    padding-right: 20rpx;
    border-radius: 50%;
}

.bottom-container{
    position: relative;
    /* display: flex; */
    width: 100%;
    border: 1rpx solid #0f0;
}

.bottom-bage {
    /* position: absolute; */
    display: inline-block;
    top: 0rpx;
    left: 58rpx;
    background-color: red;
    text-align: center;
    width: 34rpx;
    height: 34rpx;
    line-height: 34rpx;
    color: white;
    border:2rpx solid #FFFFFF;
    border-radius: 17rpx;
    font-size: 26rpx;
    
}

.two {
   width: 44rpx; 
}


.three {
   width: 54rpx; 
}

 

滑动门

1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，         出现了CSS滑动门技术。
1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的          文本内容，可用性更强。
1.3 最常见于各种导航栏的滑动门。

小程序版：

<!--pages/f/f.wxml-->
<view>滑动门</view>
<text>特殊形状的背景能够自适应元素中文本内容的多少</text>
<view>使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强</view>
<view class="tap">
    <view class="item">1</view>
</view>
<view class="tap">
    <view class="item">123</view>
</view>
<view class="tap">
    <view class="item">123456</view>
</view>
<view class="tap">
    <view class="item">123456789</view>
</view>

样式

/* pages/f/f.wxss */
/*撑开展示左边的圆角*/
.tap {
    display: inline-block;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    height: 66rpx;
    padding-left: 30rpx;
    line-height: 66rpx;
    color: #fff;
    margin: 10rpx;
}
/*撑开展示右边的圆角*/
.item {
    display: inline-block;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    background-position: right;
    height: 66rpx;
    padding-right: 30rpx;
    line-height: 66rpx;
}

。。。

 

 

h5版

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>滑动门</title>
<!--     1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，         出现了CSS滑动门技术。
    1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的          文本内容，可用性更强。
    1.3 最常见于各种导航栏的滑动门。 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
          margin: 100px;
          display: inline-block;
          /*千万不能设置宽*/
           height: 33px;
            background: url("img/lTcb_ve.png") no-repeat;
            /*撑开展示左边的圆角*/
            padding-left: 15px;
            color: #fff;
            text-decoration: none;
            line-height: 33px;
        }
        a  span{
            display: inline-block;
            /*千万不能设置宽*/
            height: 33px;
            /*no-repeat默认取的左边的图片，这里需要取右边的图片*/
            background: url("img/lTcb_ve.png") no-repeat  right;
            /*撑开展示右边的圆角*/
            padding-right: 15px;
        }
    </style>
</head>
<body>
    <a href="#">
        <span>首页</span>
    </a>
    <a href="#">
        <span>开发平台</span>
    </a>
    <a href="#">
        <span>北京尚学堂</span>
    </a>
</body>
</html>

 

王竹根
关注
专栏目录
CSS--滑动门和过渡效果
qq_27150223的博客
02-07 547
滑动门 滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。 核心技术 核心技术就是利用...
CSS高级技巧：元素的显示与隐藏-用户界面样式-溢出的文字省略号显示-精灵技术-滑动门核心技术
解启超
02-19 642
CSS高级技巧 目标 理解 能说出元素显示隐藏最常见的写法 能说出精灵图产生的目的 能说出去除图片底侧空白缝隙的方法 应用 能写出最常见的鼠标样式 能使用精灵图技术 能用滑动门做导航栏案例 1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！ 1.1 display 显示（重点）...
一个基于Ajax+CSS技术实现的网页导航滑动门特效（点击式）程序例子
04-28
一个基于Ajax+CSS技术实现的网页导航滑动门特效（点击式）程序例子
文字自适应
u012149661的博客
03-27 266
实现功能： Text在达到最大长度前，gameObject会自动变大，适应文字长度 gameObject达到最大后，gameObject不再变大，Text文字自适应减小 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; [RequireCompo...
动画 小程序滑动显示_动画滑动门图像以显示背景
cungui5726的博客
08-20 190
动画 小程序滑动显示As a general rule it’s best not to disturb the integrity of a well-crafted photograph, but it is possible to split an image to reveal content hidden underneath. Most methods use two separate...
文字编排中的自适应和它适应
qq_44883796的博客
05-28 538
（撰写时间：5月27号；作者：谢良杰） 文字编排是通过对文字自身的特性，风格气质，并利用其结构的优势，在有限的空间内进行进行合理的位置调度。文字编排的自适应是指文字和文字之间的关系、其涵盖字体选择、字体设计、间距、行距、文字创意等等一些文字重组调整，并以目的为导向的设计处理手段，以文字自身的编排组合为出发点的视觉呈现。 上面的两张海报，第一张是正常排列，第二张是经过一种名叫自适应编排的手法进行排...
微信滑动门小案例
咖啡杯里的茶
03-11 427
先看一下微信官顶部样式 上面的首页，帮助与反馈等样式都是由背景图片实现的，至于为什么需要用到滑动的知识是因为每一个链接里面的字数是不一样的，也就是说这些字外面的框应该是根据内容的多少自动扩展，所以需要使用到滑动的方式。 滑动原理 虽说是滑动，但是实际上底部依然只是一张背景图片，只是可以将这个背景图片看做是两部分，第一部分就是左边的那个半圆部分，第二部分就是后面半圆以及矩形部分。左侧半圆固定，当字...
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
10-23
滑动门效果是指当内容超出指定区域时，内部导航栏的宽度会随着内容的增加而自动扩展，而不会破坏布局的整体美观。在传统的滑动门效果中，通常使用两个图片来分别实现左侧和右侧的边框，从而形成一个视觉上的整体。但...
自适应宽度圆角按钮代码
01-08
滑动门技术利用背景图像的切片，通过设置不同的边距和背景位置，使按钮的前景部分（文字或图标）和背景的圆角部分组合在一起，形成圆角效果。然而，随着CSS3的普及，这种方法逐渐被更简洁的纯CSS解决方案所取代。 ...
微信小程序 view自适应宽度
zxh1101188677的博客
07-19 5088
场景描述：view内部文字不能自适应宽度，如下图： 解决办法： <view class="tabWrap1" style="white-space: nowrap"> <view>全部</view> <view>瓜果蔬菜类</view> <view>服装类</view> <view>管过蔬菜类1</view> <view>服装类1</view> </view
小程序实现锚点滑动效果
10-16
主要为大家详细介绍了小程序实现锚点滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap实现响应式自适应导航栏，并实现平滑滚动
07-22
bootstrap实现响应式自适应导航栏，并实现平滑滚动
自适应宽度背景跟随滑动导航
04-24
兼容：IE6-9,Mozilla Firefox,Google Chrome,Opera等浏览器的自动适应宽度背景跟着滑动的导航。
滑动门特效完整代码实现
07-24
滑动门特效完整代码实现
微信滑动门
Mm_Dxx的博客
01-16 284
微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多。为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。 其核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。 一般的经典布局都是这样的： <li> <a href="#"> <span>导航栏内容<...
滑动门功能
weixin_30378623的博客
06-27 205
.all{ width: 100px; height: 60px; background: red url("images/border/nav-center.jpg") repeat-x; //图片为宽度为1px margin: 200px auto; ...
【论文阅读】Merging Statistical Feature via Adaptive Gate for Improved Text Classification基于自适应门的统计特征合并改进
qq_45721997的博客
03-12 1237
Merging Statistical Feature via Adaptive Gate for Improved Text Classification 来自期刊AAAI 2021年的 文章信息如下图所示（作者…) 和之前的论文阅读专栏一样，只对部分进行翻译、截取、笔记。 目录1. Introduction2.Related Work2.1 Text classification2.2 Classifier with additional knowledge3. Methodology3.1 Glob
CSS 滑动门技巧
快乐de馒头
01-20 256
滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。 核心技术 核心技术就是...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值