<style>
.tengfei-vip-box{position:relative;width:100%;height:130px;background:#e0f2fe;margin:0 auto;border-radius:10px;overflow:hidden;box-sizing:border-box}.tengfei-vip-box::after{position:absolute;top:0;left:0;transform:translate(-50%,-50%);content:"";width:100px;height:100px;border-radius:50%;background:#0284c7;z-index:1;opacity:0.15}.tengfei-vip-box::before{position:absolute;bottom:0;right:0;transform:translate(50%,50%);content:"";width:180px;height:180px;border-radius:50%;background:#0284c7;z-index:1;opacity:0.15}.tengfei-vip-box > .tengfei-vip-left-icon > i{position:absolute;font-size:100px;z-index:1;color:#0284c7;top:50%;transform:translateY(-50%);left:50px}.tengfei-vip-box > .tengfei-vip-left-text{position:absolute;left:180px;height:100%}.tengfei-vip-box > .tengfei-vip-left-text h2{color:#0284c7;font-size:23px;margin-top:30px;font-weight:400}.tengfei-vip-box > .tengfei-vip-left-text ul{margin:0;padding:0;margin-top:12px}.tengfei-vip-box > .tengfei-vip-left-text ul li{display:inline-block;list-style:none;padding:0 5px;color:#0284c7;transform:translateX(-7px)}.tengfei-vip-box > .tengfei-vip-left-text ul li i{margin-right:8px}.tengfei-vip-box > .tengfei-vip-right-btn{position:absolute;height:35px;width:130px;line-height:33px;text-align:center;text-decoration:none;font-style:normal;background-color:#0284c7;color:#fff;right:100px;top:50%;transform:translateY(-50%);border-radius:30px}.tengfei-vip-box > .tengfei-vip-right-btn span{font-size:18px;text-align:center}.tengfei-vip-box > .tengfei-vip-right-btn i{font-size:20px;margin-left:3px}.tengfei-vip-box > .tengfei-vip-icons li{list-style:none;color:#0284c7;opacity:0.3;position:absolute}.tengfei-vip-box > .tengfei-vip-icons li:nth-child(1){top:10%;left:45%;font-size:24px;transform:rotate(-20deg)}.tengfei-vip-box > .tengfei-vip-icons li:nth-child(2){top:60%;left:55%;font-size:24px;transform:rotate(10deg)}.tengfei-vip-box > .tengfei-vip-icons li:nth-child(3){top:30%;left:70%;font-size:20px;transform:rotate(35deg)}@media screen and (max-width:768px){.tengfei-vip-box{height:180px;padding:0}.tengfei-vip-box > .tengfei-vip-left-icon > i{top:-3px;transform:translateX(-50%);left:50%;font-size:50px}.tengfei-vip-box > .tengfei-vip-left-text{top:30px;transform:translateX(-50%);left:50%;width:100%;text-align:center}.tengfei-vip-box > .tengfei-vip-left-text h2{font-size:20px;text-align:center}.tengfei-vip-box > .tengfei-vip-left-text ul{margin-top:5px}.tengfei-vip-box > .tengfei-vip-left-text li{font-size:13px;text-align:center}.tengfei-vip-box > .tengfei-vip-right-btn{top:130px;right:50%;transform:translateX(50%)}.tengfei-vip-box > .tengfei-vip-right-btn{top:130px;height:28px;line-height:26px;width:100px;text-align:center}.tengfei-vip-box > .tengfei-vip-right-btn i{font-size:15px;margin-left:0px}.tengfei-vip-box > .tengfei-vip-right-btn span{font-size:15px}}

    </style>
<div class="tengfei-vip-box">
    <div class="tengfei-vip-left-icon">
        <i class="iconfont icon-f-vip">
        </i>
    </div>
    <div class="tengfei-vip-left-text">
        <h2>
 开通会员，享更多权益！
        </h2>
        <ul>
            <li>
                <i class="iconfont icon-Gc_115_face-Star">
                </i>
                专享内容
            </li>
            <li>
                <i class="fa fa-wechat" aria-hidden="true">
              
</i>
 技术支持
            </li>
            <li>
                <i class="iconfont icon-gouwuche1">
                </i>
                会员折扣
            </li>
					<li>
						<i class="fa fa-vimeo" aria-hidden="true" >
                </i>
                认证标识
            </li>
					<li>
                <i class="fa fa-heart" aria-hidden="true">
                </i>
                超多福利
            </li>
        </ul>
    </div>
    <a class="tengfei-vip-right-btn" href="/vip-2">
        <span>
            开通会员
        </span>
        <i class="iconfont icon-jiantou_youshang">
        </i>
    </a>
    <ul class="tengfei-vip-icons">
        <li>
            <i class="iconfont icon-VIP">
            </i>
        </li>
        <li>
            <i class="iconfont icon-f-vip">
            </i>
        </li>
        <li>
            <i class="iconfont icon-rocket">
            </i>
        </li>
    </ul>
</div>    

定位：小工具-自定义HTML