資料結構
網路
關係資料庫管理系統 (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
廣告