数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用CSS创建响应式价格表？
在网站托管网站上，您一定见过价格方案。同样，在销售会员资格的网站上，也会显示价格比较表。此类表格比较各种方案（例如免费和付费方案，或免费、商业、企业等方案）的功能。让我们看看如何使用CSS创建响应式价格表，即这些表格如何在不同的设备上显示。
比较字段
设置要比较的字段。为此，您可以使用<ul>并列出功能。在这里，我们展示了一个单一方案，即免费会员的价格表，即用户无需付费即可免费获得的功能。还为用户放置了一个按钮，如果他们对该特定会员方案感兴趣，可以点击。
<div class="compareFields">
<ul class="pricing">
<li class="header">Free Membership</li>
<li>20 messages</li>
<li>No customer Support</li>
<li>98% uptime</li>
<li>1GB per day</li>
<li>50GB storage</li>
<li>
<a href="#" class="button" style="background-color: rgb(52, 31, 129);">Register</a>
</li>
</ul>
</div>
对于付费会员，我们使用了相同的格式，并列出了用户付费后将获得的所有功能。
<div class="compareFields">
<ul class="pricing">
<li class="header" style="background-color:rgb(250, 136, 59)">
Advanced Membership
</li>
<li>100 messages</li>
<li>24 * 7 customer support</li>
<li>99.9% uptime</li>
<li>8GB per day</li>
<li>150GB storage</li>
<li>
<a href="#" class="button" style="background-color:rgb(250, 136, 59)" >Register</a>
</li>
</ul>
</div>
定位比较字段
要比较的字段的位置设置为左侧。
.compareFields {
float: left;
width: 50%;
padding: 8px;
}
价格功能
价格表的功能使用<ul>进行样式设置。由于我们使用了无序列表，因此将类型设置为none以使项目符号不可见。
.pricing {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
设置响应式
使用媒体查询来设置响应式。当屏幕尺寸小于600像素时，宽度设置为100% 。
@media only screen and (max-width: 600px) {
.compareFields {
width: 100%;
}
示例
要使用CSS创建响应式价格表，代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.compareFields {
float: left;
width: 50%;
padding: 8px;
}
li {
font-size: 18px;
font-weight: 500;
}
.pricing {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.pricing:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
}
.pricing .header {
background-color: rgb(52, 31, 129);
color: white;
font-size: 25px;
}
.pricing li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.button {
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
@media only screen and (max-width: 600px) {
.compareFields {
width: 100%;
}
}
</style>
</head>
<body>
<h1 style="text-align:center">Responsive Pricing Tables Example</h1>
<div class="compareFields">
<ul class="pricing">
<li class="header">Free Membership</li>
<li>20 messages</li>
<li>No customer Support</li>
<li>98% uptime</li>
<li>1GB per day</li>
<li>50GB storage</li>
<li>
<a href="#" class="button" style="background-color: rgb(52, 31, 129);">Register</a>
</li>
</ul>
</div>
<div class="compareFields">
<ul class="pricing">
<li class="header" style="background-color:rgb(250, 136, 59)">
Advanced Membership
</li>
<li>100 messages</li>
<li>24 * 7 customer support</li>
<li>99.9% uptime</li>
<li>8GB per day</li>
<li>150GB storage</li>
<li>
<a href="#" class="button" style="background-color:rgb(250, 136, 59)" >Register</a>
</li>
</ul>
</div>
</body>
</html>
更新于：2023年12月14日
浏览量：329
广告