CSS实现响应式价格表

最后更新时间：2020-11-26 18:02:41

table

响应式定价表用于显示表中的定价和其他类似内容，因为它对表做出响应是根据屏幕尺寸进行调整。

演示地址
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