直接使用代码

图片素材

无

css代码

     <style>
*{padding: 0;margin: 0;}
body{color: #666;}
ul{list-style: none;}
a{text-decoration: none;cursor: default;}
.module-line{width: 100%;text-align: center;margin-top:40px; margin-bottom:40px}
.module-line span{display: inline-block;*display: inline;*zoom: 1}
.module-line .text{font-size: 26px;color: #4c4c4c;margin: 0 10px}
.module-line .arrow{width: 84px;height: 16px}
.module-line .left-arrow{background: url(http://www.bootfastui.cn/img/2020/200424-5/leftArrow.png)}
.module-line .right-arrow{background: url(http://www.bootfastui.cn/img/2020/200424-5/rightArrow.png)}
.module-privilege{width: 1100px;height: 910px;margin: 10px auto 40px;position: relative}
.module-privilege .privilege-ul{float: left;border: 1px solid #d3d1d0;background: #fff;width: 273px;position: absolute}
.module-privilege .privilege-ul.name-ul{left: 0}
.module-privilege .privilege-ul.svip-ul{left: 275px;color: #ca963b;-moz-box-shadow: 0 0 10px 2px rgba(0, 0, 0, .08);box-shadow: 0 0 10px 2px rgba(0, 0, 0, .08)}
.module-privilege .privilege-ul.vip-ul{left: 548px;border-right: 0}
.module-privilege .privilege-ul.no-vip-ul{left: 822px}
.module-privilege .privilege-ul .privilege-item{text-align: center;height: 45px;line-height: 45px;font-size: 14px}
.module-privilege .privilege-ul .privilege-item a{color: #666;display: block;width: 100%;height: 100%}
.module-privilege .privilege-ul .privilege-item.first-item{height: 102px;padding-top: 20px}
.module-privilege .privilege-ul .privilege-item.first-item .buy-button-base{margin-top: 14px}
.module-privilege .privilege-ul .privilege-item .title,
.module-privilege .privilege-ul .privilege-item .svip-type{font-size: 20px}
.module-privilege .privilege-ul .privilege-item .title .vip-type-icon,
.module-privilege .privilege-ul .privilege-item .svip-type .vip-type-icon{display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;height: 30px}
.module-privilege .privilege-ul .privilege-item .title .vip-type-title,
.module-privilege .privilege-ul .privilege-item .svip-type .vip-type-title{height: 30px;line-height: 30px;display: inline-block;vertical-align: middle}
.module-privilege .privilege-ul .privilege-item .vip-type,
.module-privilege .privilege-ul .privilege-item .no-vip-type{font-size: 20px;margin-top: -4px}
.module-privilege .privilege-ul .privilege-item .vip-type .vip-type-icon,
.module-privilege .privilege-ul .privilege-item .no-vip-type .vip-type-icon{display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;height: 30px}
.module-privilege .privilege-ul .privilege-item .vip-type .vip-type-title,
.module-privilege .privilege-ul .privilege-item .no-vip-type .vip-type-title{height: 30px;line-height: 30px;display: inline-block;vertical-align: middle}
.module-privilege .privilege-ul .privilege-item .icon{display: inline-block;*display: inline;*zoom: 1;width: 20px;height: 20px}
.module-privilege .privilege-ul .privilege-item .icon.right{margin-top: 12px;background-image: url(http://www.bootfastui.cn/img/2020/200424-5/right.png);background-repeat: no-repeat}
.module-privilege .privilege-ul .privilege-item .icon.error{margin-top: 15px;background-image: url(http://www.bootfastui.cn/img/2020/200424-5/error.png);background-repeat: no-repeat}
.module-privilege .privilege-ul.recommend{background-image: url(http://www.bootfastui.cn/img/2020/200424-5/recommend.png);background-position: -1px -1px;background-repeat: no-repeat}
.module-privilege .privilege-ul.active{border-color: #f2ddaf;background-color: #fffaeb;margin-top: -4px;width: 285px;left: 269px;z-index: 10}
.module-privilege .privilege-ul.active .privilege-item.first-item{height: 106px}
.module-privilege .privilege-ul.active .privilege-item.last-item{height: 49px}
.icon-size-middle{width: 30px;height: 30px;}
.vip-icon,.buy-btn-box{display: inline-block;}
.vip-icon.svip-middle{background-image: url(http://www.bootfastui.cn/img/2020/200424-5/level2.png);background-repeat: no-repeat;}
.vip-icon.vip-middle{background-image: url(http://www.bootfastui.cn/img/2020/200424-5/level1.png);background-repeat: no-repeat;}
.vip-icon.no-vip-middle{background-image: url(http://www.bootfastui.cn/img/2020/200424-5/level0.png);background-repeat: no-repeat;}
.center-button-container-middle{width: 120px;height: 30px;font-size: 14px;line-height: 30px;text-align: center;border-radius: 15px;}
.center-button-light-red{border: 1px solid rgba(228, 88, 88, .5);color: #e45858;}
.center-button-light-red:hover{border: 1px solid #e45858;}
.center-button-light-yellow{border: 1px solid #f9d681;background-color: #f9d681;color: #351d06;}
.center-button-light-yellow:hover{background-color: #e7c062;}
.center-button-base{cursor: pointer;display: inline-block;margin: 0 5px;}
</style>

HTML+JS代码

 <div class="module-line">
    <span class="arrow left-arrow"></span>
    <span class="text">特权对比</span>
    <span class="arrow right-arrow"></span>
</div>

<div class="module-privilege">
    <ul class="privilege-ul name-ul">
        <li class="privilege-item first-item">
            <p class="title">
                <span>功能特权</span>
            </p>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">
            <a>空间容量</a>
        </li>
        <li class="privilege-item">
            <a>极速下载</a>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">
            <a>批量上传数量</a>
        </li>
        <li class="privilege-item">
            <a>云解压</a>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">
            <a>转存文件数上限</a>
        </li>
        <li class="privilege-item">
            <a>视频高速通道</a>
        </li>
        <li class="privilege-item">
            <a>视频倍速播放</a>
        </li>
        <li class="privilege-item">
            <a>音频倍速播放</a>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">
            <a>垃圾文件清理</a>
        </li>
        <li class="privilege-item">
            <a>大文件上传</a>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">
            <a>回收站有效期</a>
        </li>
        <li class="privilege-item">
            <a>照片电影特权</a>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">
            <a>自动备份手机视频</a>
        </li>
        <li class="privilege-item">
            <a>自动备份本地文件夹</a>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">
            <a>备份本地文件夹</a>
        </li>
        <li class="privilege-item">
            <a>备份实况照片</a>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">
            <a>历史版本</a>
        </li>
        <li class="privilege-item">
            <a>尊贵身份标识</a>
        </li>
    </ul>
    <ul class="privilege-ul svip-ul active recommend">
        <li class="privilege-item first-item">
            <div class="svip-type">
                <p class="vip-type-icon">
                    <span class="vip-icon svip-middle icon-size-middle"></span>
                </p>
                <span class="vip-type-title">超级会员</span>
            </div>
            <div class="buy-btn-box">
                <p class="center-button-base center-button-light-yellow center-button-container-middle">开通超级会员
                </p>
            </div>
        </li>
        <li class="privilege-item" style="background: #fbf4e4">5T</li>
        <li class="privilege-item">极速下载</li>
        <li class="privilege-item" style="background: #fbf4e4">无上限</li>
        <li class="privilege-item">4G内压缩包</li>
        <li class="privilege-item" style="background: #fbf4e4">50000个</li>
        <li class="privilege-item"><span class="icon right"></span></li>
        <li class="privilege-item"><span class="icon right"></span></li>
        <li class="privilege-item"><span class="icon right"></span></li>
        <li class="privilege-item" style="background: #fbf4e4"><span class="icon right"></span></li>
        <li class="privilege-item">20G</li>
        <li class="privilege-item" style="background: #fbf4e4">30天</li>
        <li class="privilege-item">20张照片</li>
        <li class="privilege-item" style="background: #fbf4e4"><span class="icon right"></span></li>
        <li class="privilege-item"><span class="icon right"></span></li>
        <li class="privilege-item" style="background: #fbf4e4"><span class="icon right"></span></li>
        <li class="privilege-item"><span class="icon right"></span></li>
        <li class="privilege-item" style="background: #fbf4e4"><span class="icon right"></span></li>
        <li class="privilege-item last-item"><span class="icon right"></span></li>
    </ul>
    <ul class="privilege-ul vip-ul ">
        <li class="privilege-item first-item">
            <div class="vip-type">
                <p class="vip-type-icon">
                    <span class="vip-icon vip-middle icon-size-middle"></span>
                </p>
                <span class="vip-type-title">会员</span>
            </div>
            <div class="buy-btn-box">
                <p class="center-button-base center-button-light-red center-button-container-middle">开通会员
                </p>
            </div>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">2T（免任务扩容至2T）</li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item" style="background: #fbf9f8">500个</li>
        <li class="privilege-item">2G内压缩包</li>
        <li class="privilege-item" style="background: #fbf9f8">3000个</li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item" style="background: #fbf9f8"><span class="icon error"></span></li>
        <li class="privilege-item">10G</li>
        <li class="privilege-item" style="background: #fbf9f8">15天</li>
        <li class="privilege-item">12张照片</li>
        <li class="privilege-item" style="background: #fbf9f8"><span class="icon right"></span></li>
        <li class="privilege-item"><span class="icon right"></span></li>
        <li class="privilege-item" style="background: #fbf9f8"><span class="icon right"></span></li>
        <li class="privilege-item"><span class="icon right"></span></li>
        <li class="privilege-item" style="background: #fbf9f8"><span class="icon right"></span></li>
        <li class="privilege-item"><span class="icon right"></span></li>
    </ul>
    <ul class="privilege-ul no-vip-ul">
        <li class="privilege-item first-item">
            <div class="no-vip-type">
                <p class="vip-type-icon">
                    <span class="vip-icon no-vip-middle icon-size-middle"></span>
                </p>
                <span class="vip-type-title">非会员</span>
            </div>
        </li>
        <li class="privilege-item" style="background: #fbf9f8">完成任务后扩容至2T</li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item" style="background: #fbf9f8">500个</li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item" style="background: #fbf9f8">1000个</li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item" style="background: #fbf9f8"><span class="icon error"></span></li>
        <li class="privilege-item">4G</li>
        <li class="privilege-item" style="background: #fbf9f8">10天</li>
        <li class="privilege-item">12张照片</li>
        <li class="privilege-item" style="background: #fbf9f8"><span class="icon error"></span></li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item" style="background: #fbf9f8"><span class="icon error"></span></li>
        <li class="privilege-item"><span class="icon error"></span></li>
        <li class="privilege-item" style="background: #fbf9f8"><span class="icon error"></span></li>
        <li class="privilege-item"><span class="icon error"></span></li>
    </ul>
</div>