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

css布局vip会员特权对比效果代码

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