一款带鼠标悬浮特效的CSS响应式价格表,默认中间一个价目卡片为选中项,每一个价格表都有一个鼠标的悬停特效,突出显示并增加阴影等,样式可以自由调整,喜欢的小伙伴们请收下吧。
页面的head部分仅需引入一个CSS样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分结构比较清晰,div容器里放入多个li标签,基本一看就懂,代码如下:
<div class="flex-container">
<div class="flex-item">
<ul class="package">
<li class="header">基础版</li>
<li class="gray">¥ 29/月</li>
<li>20GB 存储空间</li>
<li>100 域名</li>
<li>1TB 数据流量</li>
<li>1000 邮件推送</li>
<li class="gray">
<button>加入购物车</button>
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header highlight">专业版</li>
<li class="gray">¥ 59/月</li>
<li>100GB 存储空间</li>
<li>500 域名</li>
<li>2TB 数据流量</li>
<li>1000 邮件推送</li>
<li class="gray">
<button>加入购物车</button>
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header">尊享版</li>
<li class="gray">¥ 99/月</li>
<li>250GB 存储空间</li>
<li>500 域名</li>
<li>5TB 带宽</li>
<li>1000 邮件推送</li>
<li class="gray">
<button>加入购物车</button>
</li>
</ul>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791