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

<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />

<link rel="stylesheet" type="text/css" href="css/demo.css">

<link rel="stylesheet" href="css/font-awesome.min.css">

<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

<div class="demo" style="background:#c0bfbf;padding: 1em 0;">

    <div class="container">

        <div class="row">

            <div class="col-md-3 col-sm-6">

                <div class="pricingTable">

                    <div class="pricingTable-header">

                        <h3 class="heading">Standard</h3>

                        <span class="price-value">

                            <span class="currency">$</span> 10

                            <span class="month">/mo</span>

                        </span>

                    </div>

                    <div class="pricing-content">

                        <ul>

                            <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="read">sign up</a>

                    </div>

                </div>

            </div>

            <div class="col-md-3 col-sm-6">

                <div class="pricingTable">

                    <div class="pricingTable-header">

                        <h3 class="heading">Business</h3>

                        <span class="price-value">

                            <span class="currency">$</span> 20

                            <span class="month">/mo</span>

                        </span>

                    </div>

                    <div class="pricing-content">

                        <ul>

                            <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="read">sign up</a>

                    </div>

                </div>

            </div>

            <div class="col-md-3 col-sm-6">

                <div class="pricingTable">

                    <div class="pricingTable-header">

                        <h3 class="heading">Premium</h3>

                        <span class="price-value">

                            <span class="currency">$</span> 30

                            <span class="month">/mo</span>

                        </span>

                    </div>

                    <div class="pricing-content">

                        <ul>

                            <li>70GB Disk Space</li>

                            <li>70 Email Accounts</li>

                            <li>70GB Monthly Bandwidth</li>

                            <li>20 Subdomains</li>

                            <li>25 Domains</li>

                        </ul>

                        <a href="#" class="read">sign up</a>

                    </div>

                </div>

            </div>

            <div class="col-md-3 col-sm-6">

                <div class="pricingTable">

                    <div class="pricingTable-header">

                        <h3 class="heading">Extra</h3>

                        <span class="price-value">

                            <span class="currency">$</span> 40

                            <span class="month">/mo</span>

                        </span>

                    </div>

                    <div class="pricing-content">

                        <ul>

                            <li>80GB Disk Space</li>

                            <li>80 Email Accounts</li>

                            <li>80GB Monthly Bandwidth</li>

                            <li>25 Subdomains</li>

                            <li>30 Domains</li>

                        </ul>

                        <a href="#" class="read">sign up</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>