css布局vip会员特权对比效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局vip会员特权对比效果代码，详细描述了vip特权与普通会员享受的特权的不同。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <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(//repo.bfw.wiki/bfwrepo/images/vip/leftArrow.png)}
    .module-line .right-arrow{background: url(//repo.bfw.wiki/bfwrepo/images/vip/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(//repo.bfw.wiki/bfwrepo/images/vip/right.png);background-repeat: no-repeat}
    .module-privilege .privilege-ul .privilege-item .icon.error{margin-top: 15px;background-image: url(//repo.bfw.wiki/bfwrepo/images/vip/error.png);background-repeat: no-repeat}
    .module-privilege .privilege-ul.recommend{background-image: url(//repo.bfw.wiki/bfwrepo/images/vip/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(//repo.bfw.wiki/bfwrepo/images/vip/level2.png);background-repeat: no-repeat;}
    .vip-icon.vip-middle{background-image: url(//repo.bfw.wiki/bfwrepo/images/vip/level1.png);background-repeat: no-repeat;}
    .vip-icon.no-vip-middle{background-image: url(//repo.bfw.wiki/bfwrepo/images/vip/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>
</head>

<body>


    <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>
      .........完整代码请登录后点击上方下载按钮下载查看