子比主题美化 – VIP会员介绍悬浮按钮

给大家分享一个子比主题右侧侧边VIP会员介绍悬浮按钮样式美化，这个美化是很早的了，我忘记发了，然后就是我记录一下这个美化，以便后面好找代码

<div style="height: 85px;background-size:100% 100%;background-image:url(https://huliku.com/images/vip/vip_bg.png)">
  <div id="top-market-cut" class="top-market-cut">限时抢购</div>
  <div class="pos_vip">
    <p>　　　</p>
    <i class="vip-icon-13"></i>
    <p class="money">88</p><p>元/年</p>
  </div></div>
<div class="vip_person_main">
  <ul class="person_vip_list">
    <li><div class="icon_box">
      <img data-src="https://huliku.com/images/vip/vip_ad.png" class=" lazyloaded" src="https://huliku.com/images/vip/vip_ad.png" loading="lazy"></div> 
    <p class="vip_use_name">视频解析</p></li>
    <li><div class="icon_box">
      <img data-src="https://huliku.com/images/vip/vip_dy.png" class=" lazyloaded" src="https://huliku.com/images/vip/vip_dy.png" loading="lazy"></div>
      <p class="vip_use_name">短视频</p></li>
    <li><div class="icon_box">
      <img data-src="https://huliku.com/images/vip/vip_pic.png" class=" lazyloaded" src="https://huliku.com/images/vip/vip_pic.png" loading="lazy"></div>
      <p class="vip_use_name">背景美图</p></li>
    <li><div class="icon_box">
      <img data-src="https://huliku.com/images/vip/vip_pz.png" class=" lazyloaded" src="https://huliku.com/images/vip/vip_pz.png" loading="lazy"></div>
      <p class="vip_use_name">图片分享</p></li>
    <li><div class="icon_box">
      <img data-src="https://huliku.com/images/vip/vip_wb.png" class=" lazyloaded" src="https://huliku.com/images/vip/vip_wb.png" loading="lazy"></div>
      <p class="vip_use_name">文章分享</p></li>
    <li><div class="icon_box">
      <img data-src="https://huliku.com/images/vip/vip_dp.png" class=" lazyloaded" src="https://huliku.com/images/vip/vip_dp.png" loading="lazy"></div>
      <p class="vip_use_name">个人中心</p></li>
    <li><div class="icon_box">
      <img data-src="https://huliku.com/images/vip/vip_zy.png" class=" lazyloaded" src="https://huliku.com/images/vip/vip_zy.png" loading="lazy"></div>
      <p class="vip_use_name">网站资源</p></li>
    <li><div class="icon_box">
      <img data-src="https://huliku.com/images/vip/vip_wz.png" class=" lazyloaded" src="https://huliku.com/images/vip/vip_wz.png" loading="lazy"></div>
      <p class="vip_use_name">文章编辑</p>
    </li></ul></div></div>

将HTML代码放到：全局功能-悬浮功能-如图下

css

.top-market-cut{position: absolute;top: 0;left: 0;display: block;min-width: 90px;padding: 0 9px;text-align: center;height: 17px;line-height: 17px;font-size: 12px;color: #BB6E2F;background: #fbdac4;border-radius: 15px 0 11px;}
.pos_<a target="_blank" href="https://vip.lzzcc.cn/tag/vip" title="查看所有关于 vip 的文章">vip</a>{position: absolute;top: 38px;left: 100px;display: flex;-webkit-box-align: end;align-items: flex-end;}
.pos_vip p:nth-of-type(1){font-size: 26px;font-weight: 600;color: rgba(0,0,0,.65);line-height: 22px;margin-right: 10px;}
.vip-icon-13{display: inline-block;height: 30px;background-image: url(https://huliku.com/images/vip/vip-icon-13.png);background-size: contain;background-position: center center;background-repeat: no-repeat;margin: 0 16px 12px 4px;width: 110px;}
.money{padding-bottom: 10px;margin: 0 4px 0 0;font-size: 50px;font-weight: 500;color: #EAA44D;line-height: 38px;}
.pos_vip p:last-child{font-size: 16px;font-weight: 800;color: rgba(0,0,0,.45);line-height: 16px;}
.vip_person_main{padding: 24px 20px;}
.person_vip_list li{float: left;text-align: center;margin-right: 9.5px;cursor: pointer;}
.icon_box{position: relative;width: 60px;height: 50px;background: #FFF9F5;border-radius: 4px;}
.person_vip_list li .icon_box img{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 30px;height: auto;}
.vip_use_name{margin-top: 10px;font-size: 14px;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #8b8b8b;line-height: 20px;text-align: center;}
.func-info-box{width:662px;height:348px;background:#FFF;-webkit-border-radius:8px;border-radius:8px;left:-486px;border:0;-webkit-box-shadow:0 0 8px 2px rgba(191,191,191,.34);box-shadow:0 0 8px 2px rgba(191,191,191,.34);}
@media (max-width:767px) {
.person_vip_list li {margin-right: -1.5px;}
.vip-icon-13 {margin: 0 0 12px -180px;}
}