基于Bootstrap漂亮簡潔的CSS3價格表(附源碼下載)

這是一款漂亮簡潔的CSS3價格表樣式，該價格表基于Bootstrap網(wǎng)格系統(tǒng)來進行布局，通過簡單的CSS3代碼來美化價格表，樣式非常的時尚漂亮，且能在不同屏幕下展示良好的效果。

目前創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)頁空間、網(wǎng)站運營、企業(yè)網(wǎng)站設計、宜春網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

基于Bootstrap漂亮簡潔的CSS3價格表(附源碼下載)

查看演示     下載源碼

HTML

首先在頁面中引入bootstrap.min.css文件，這里我用官方的cdn資源，你也可以下載到本地使用。

<link rel="stylesheet"  rel="external nofollow" >

該css3價格表的HTML結構如下：

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="pricingTable">
        <h4 class="title">Standard</h4>
        <div class="price-value">
          <span class="month">per month</span>
          <span class="amount">
            <span class="currency">$</span>
            10
            <span class="value">99</span>
          </span>
        </div>
        <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="#" rel="external nofollow" rel="external nofollow" class="pricingTable-signup">sign up</a>
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="pricingTable">
        <h4 class="title">Business</h4>
        <div class="price-value">
          <span class="month">per month</span>
          <span class="amount">
            <span class="currency">$</span>
            20
            <span class="value">99</span>
          </span>
        </div>
        <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="#" rel="external nofollow" rel="external nofollow" class="pricingTable-signup">sign up</a>
      </div>
    </div>
  </div>
</div>

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; }
}

現(xiàn)在你可以打開瀏覽器看看效果了，手機上效果也不錯的。

以上所述是小編給大家介紹的基于Bootstrap漂亮簡潔的CSS3價格表(附源碼下載)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

當前題目：基于Bootstrap漂亮簡潔的CSS3價格表(附源碼下載)
URL分享：http://muchs.cn/article4/gpheie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、小程序開發(fā)、品牌網(wǎng)站設計、服務器托管、網(wǎng)站維護、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)