這篇文章主要介紹了利用Bootstrap實現漂亮簡潔的CSS3價格表效果，實現的效果非常的不錯，而且能夠使用不同的螢幕尺寸，需要的朋友可以參考學習，下面來一起看看吧。
前言
這是一款漂亮簡潔的CSS3價格表樣式，該價格表基於Bootstrap網格系統來進行佈局，透過簡單的CSS3程式碼來美化價格表，樣式非常的時尚漂亮，且能在不同螢幕下展現良好的效果。
先來看效果圖
#檢視示範下載原始碼
首先在頁面中引入bootstrap.min.css文件，這裡我用官方的CDN資源，你也可以下載到本地使用。
<link rel="stylesheet" href="http//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
該css3價格表的HTML結構如下：
<p class="container"> <p class="row"> <p class="col-md-4 col-sm-6"> <p class="pricingTable"> <h3 class="title">Standard</h3> <p class="price-value"> <span class="month">per month</span> <span class="amount"> <span class="currency">$</span> 10 <span class="value">99</span> </span> </p> <ul class="pricing-content"> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>10 Subdomains</li> <li>15 Domains</li> </ul> <a href="#" class="pricingTable-signup">sign up</a> </p> </p> <p class="col-md-4 col-sm-6"> <p class="pricingTable"> <h3 class="title">Business</h3> <p class="price-value"> <span class="month">per month</span> <span class="amount"> <span class="currency">$</span> 20 <span class="value">99</span> </span> </p> <ul class="pricing-content"> <li>60GB Disk Space</li> <li>60 Email Accounts</li> <li>60GB Monthly Bandwidth</li> <li>15 Subdomains</li> <li>20 Domains</li> </ul> <a href="#" class="pricingTable-signup">sign up</a> </p> </p> </p> </p>
CSS3
為此價格表新增下面的CSS樣式來進行渲染和美化。
.pricingTable{
text-align: center;
background: #fff;
padding: 30px 0;
}
.pricingTable .title{
font-size: 22px;
font-weight: 600;
color: #2e282a;
text-transform: uppercase;
margin: 0 0 30px 0;
}
.pricingTable .price-value{
padding: 30px 0;
background: #ba5289;
margin-bottom: 30px;
position: relative;
}
.pricingTable .price-value:before{
content: "";
border-top: 15px solid #fff;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
top: 0;
left: 46%;
}
.pricingTable .month{
display: block;
height: 50px;
font-size: 15px;
font-weight: 900;
color: #fff;
text-transform: uppercase;
}
.pricingTable .amount{
display: inline-block;
font-size: 50px;
color: #fff;
position: relative;
}
.pricingTable .currency{
position: absolute;
top: -1px;
left: -35px;
}
.pricingTable .value{
font-size: 20px;
position: absolute;
top: -11px;
right: -27px;
}
.pricingTable .pricing-content{
padding: 0;
margin: 0 0 30px 0;
list-style: none;
}
.pricingTable .pricing-content li{
font-size: 16px;
color: #868686;
line-height: 35px;
}
.pricingTable .pricingTable-signup{
display: inline-block;
padding: 8px 40px;
background: #fca4a7;
font-size: 15px;
font-weight: 600;
color: #fff;
text-transform: capitalize;
border: 2px solid #fca4a7;
border-radius: 30px;
transition: all 0.5s ease 0s;
}
.pricingTable .pricingTable-signup:hover{
background: #fff;
color: #fca4a7;
}
@media only screen and (max-width: 990px){
.pricingTable{ margin-bottom: 30px; }
}我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
########## CSS有幾種實作三欄佈局的方法###############CSS與Sass開發規格#########以上是Bootstrap實現價格表的詳細內容。更多資訊請關注PHP中文網其他相關文章！
