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

改变宽度对比滑动门

<!--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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值