div css会员特权对比表格样式代码

div css制作实用的百度云会员特权对比表格样式,清晰的分辨出超级会员、会员、非会员三种不同特权对比效果代码。

 使用方法:

1、head引入css文件

1
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、body引入HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<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>
免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流,可进群讨论!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 欢迎大家帮助本站出力,赞助费用仅维持本站的日常运营所需!故不接受任何形式的退款。
5. 搜5G网无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。
本站资源素材仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
本站所有图片素材均享自由版权下创作共用CC0协议。
搜5G资源网,5G资源网 » div css会员特权对比表格样式代码

发表评论

搜5G网永久会员限时优惠中,不限下载,免费更新

立即查看 了解详情