纯CSS3实现漂亮的价格表样式代码

分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页。效果图如下:

技术分享

在线预览   源码下载

实现的代码。

html代码:

  <div id="main">
        <p style="text-align: center; padding: 30px; font-size: 16px">
            <a href="index.html">DEMO 1</a> &nbsp;&nbsp; <a href="index2.html">DEMO 2</a></p>
        <div class="demo" id="pricePlans">
            <ul id="plans">
                <li class="plan">
                    <ul class="planContainer">
                        <li class="title">
                            <h2>
                                入门型VPS</h2>
                        </li>
                        <li class="price">
                            <p>
                                ¥149/<span></span></p>
                        </li>
                        <li>
                            <ul class="options">
                                <li>小型企业、个人首选</li>
                                <li>双核至强处理器</li>
                                <li>1G DDR3 ECC <span>高速纠错内存</span></li>
                                <li>10G + 20G <span>高速企业级硬盘</span></li>
                                <li>1M <span>专线带宽</span></li>
                                <li>1个 <span>独立公网IP</span></li>
                            </ul>
                        </li>
                        <li class="button"><a href="#">点击购买</a></li>
                    </ul>
                </li>
                <li class="plan">
                    <ul class="planContainer">
                        <li class="title">
                            <h2 class="bestPlanTitle">
                                进阶型VPS</h2>
                        </li>
                        <li class="price">
                            <p class="bestPlanPrice">
                                ¥199/月</p>
                        </li>
                        <li>
                            <ul class="options">
                                <li>小型企业、个人首选</li>
                                <li>双核至强处理器</li>
                                <li>2G DDR3 ECC <span>高速纠错内存</span></li>
                                <li>10G + 40G <span>高速企业级硬盘</span></li>
                                <li>2M <span>专线带宽</span></li>
                                <li>1个 <span>独立公网IP</span></li>
                            </ul>
                        </li>
                        <li class="button"><a class="bestPlanButton" href="#">点击购买</a></li>
                    </ul>
                </li>
                <li class="plan">
                    <ul class="planContainer">
                        <li class="title">
                            <h2>
                                尊贵型VPS</h2>
                        </li>
                        <li class="price">
                            <p>
                                ¥349/<span></span></p>
                        </li>
                        <li>
                            <ul class="options">
                                <li>中型企业、个人首选</li>
                                <li>四核至强处理器</li>
                                <li>4G DDR3 ECC <span>高速纠错内存</span></li>
                                <li>10G + 60G <span>高速企业级硬盘</span></li>
                                <li>2M <span>专线带宽</span></li>
                                <li>1个 <span>独立公网IP</span></li>
                            </ul>
                        </li>
                        <li class="button"><a href="#">点击购买</a></li>
                    </ul>
                </li>
                <li class="plan">
                    <ul class="planContainer">
                        <li class="title">
                            <h2>
                                至尊型VPS</h2>
                        </li>
                        <li class="price">
                            <p>
                                ¥649/<span></span></p>
                        </li>
                        <li>
                            <ul class="options">
                                <li>大型企业、个人首选</li>
                                <li>四核至强处理器</li>
                                <li>8G DDR3 ECC <span>高速纠错内存</span></li>
                                <li>10G + 80G <span>高速企业级硬盘</span></li>
                                <li>3M <span>专线带宽</span></li>
                                <li>2个 <span>独立公网IP</span></li>
                            </ul>
                        </li>
                        <li class="button"><a href="#">点击购买</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

via:http://www.w2bc.com/Article/34604

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。