CSS实现响应式价格表
响应式定价表用于显示表中的定价和其他类似内容，因为它对表做出响应是根据屏幕尺寸进行调整。
演示地址
https://www.perfcode.com/p/1320.demo.html完整代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=
device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
/* Creates three columns of equal
width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0
rgba(0,0,0,0.2)
}
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #48d1cc;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Changes the width of the three
columns to 100% (to stack horizontally
on small screens) */
@media only screen and
(max-width: 600px) {
.columns {
width: 100%;
}
}
</style>
</head>
<body>
<h2>响应式价格表示例效果</h2>
<div class="columns">
<ul class="price">
<li class="header">基础版</li>
<li class="grey">$ 600 / 年</li>
<li>2.4G 1核 CPU</li>
<li>1G 内存 </li>
<li>20G 存储空间</li>
<li>1M 独立带宽</li>
<li class="grey"><a target="_blank" href="#"
class="button">
购买</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header"
style="background-color:
#48d1cc">高级版</li>
<li class="grey">$ 1800 / 年
</li>
<li>2.4G 4核 CPU</li>
<li>8G 内存 </li>
<li>100G 存储空间</li>
<li>5M 独立带宽</li>
<li class="grey"><a target="_blank" href="#"
class="button">
购买</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header" >网络加强版</li>
<li class="grey">$ 4000 / 年
</li>
<li>2.4G 16核 CPU</li>
<li>32G 内存 </li>
<li>100G 存储空间</li>
<li>20M 独立带宽</li>
<li class="grey"><a target="_blank" href="#"
class="button">
购买</a></li>
</ul>
</div>
</body>
</html>如需转载，请注明出处，本文地址：https://www.perfcode.com/p/1320.html