CSS3扁平风格价格表样式特效代码

创客云


CSS3扁平风格价格表样式代码是一款精美好看的扁平化设计CSS3价格表特效,该价格表基于Bootstrap网格系统来进行布局,通过简单的css3代码来美化价格表,样式非常的时尚。

  1. <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
  2. <link rel="stylesheet" type="text/css" href="css/demo.css">
  3. <link rel="stylesheet" href="css/font-awesome.min.css">
  4. <script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  5. <div class="demo" style="background:#c0bfbf;padding: 1em 0;">
  6.     <div class="container">
  7.         <div class="row">
  8.             <div class="col-md-3 col-sm-6">
  9.                 <div class="pricingTable">
  10.                     <div class="pricingTable-header">
  11.                         <h3 class="heading">Standard</h3>
  12.                         <span class="price-value">
  13.                             <span class="currency">$</span> 10
  14.                             <span class="month">/mo</span>
  15.                         </span>
  16.                     </div>
  17.                     <div class="pricing-content">
  18.                         <ul>
  19.                             <li>50GB Disk Space</li>
  20.                             <li>50 Email Accounts</li>
  21.                             <li>50GB Monthly Bandwidth</li>
  22.                             <li>10 Subdomains</li>
  23.                             <li>15 Domains</li>
  24.                         </ul>
  25.                         <a href="#" class="read">sign up</a>
  26.                     </div>
  27.                 </div>
  28.             </div>
  29.             <div class="col-md-3 col-sm-6">
  30.                 <div class="pricingTable">
  31.                     <div class="pricingTable-header">
  32.                         <h3 class="heading">Business</h3>
  33.                         <span class="price-value">
  34.                             <span class="currency">$</span> 20
  35.                             <span class="month">/mo</span>
  36.                         </span>
  37.                     </div>
  38.                     <div class="pricing-content">
  39.                         <ul>
  40.                             <li>60GB Disk Space</li>
  41.                             <li>60 Email Accounts</li>
  42.                             <li>60GB Monthly Bandwidth</li>
  43.                             <li>15 Subdomains</li>
  44.                             <li>20 Domains</li>
  45.                         </ul>
  46.                         <a href="#" class="read">sign up</a>
  47.                     </div>
  48.                 </div>
  49.             </div>
  50.             <div class="col-md-3 col-sm-6">
  51.                 <div class="pricingTable">
  52.                     <div class="pricingTable-header">
  53.                         <h3 class="heading">Premium</h3>
  54.                         <span class="price-value">
  55.                             <span class="currency">$</span> 30
  56.                             <span class="month">/mo</span>
  57.                         </span>
  58.                     </div>
  59.                     <div class="pricing-content">
  60.                         <ul>
  61.                             <li>70GB Disk Space</li>
  62.                             <li>70 Email Accounts</li>
  63.                             <li>70GB Monthly Bandwidth</li>
  64.                             <li>20 Subdomains</li>
  65.                             <li>25 Domains</li>
  66.                         </ul>
  67.                         <a href="#" class="read">sign up</a>
  68.                     </div>
  69.                 </div>
  70.             </div>
  71.             <div class="col-md-3 col-sm-6">
  72.                 <div class="pricingTable">
  73.                     <div class="pricingTable-header">
  74.                         <h3 class="heading">Extra</h3>
  75.                         <span class="price-value">
  76.                             <span class="currency">$</span> 40
  77.                             <span class="month">/mo</span>
  78.                         </span>
  79.                     </div>
  80.                     <div class="pricing-content">
  81.                         <ul>
  82.                             <li>80GB Disk Space</li>
  83.                             <li>80 Email Accounts</li>
  84.                             <li>80GB Monthly Bandwidth</li>
  85.                             <li>25 Subdomains</li>
  86.                             <li>30 Domains</li>
  87.                         </ul>
  88.                         <a href="#" class="read">sign up</a>
  89.                     </div>
  90.                 </div>
  91.             </div>
  92.         </div>
  93.     </div>
  94. </div>
  95. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  96. </div>
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60107.html
云模板

发表评论