Home  >  Article  >  Web Front-end  >  Pure CSS3 implements beautiful price list style code_html/css_WEB-ITnose

Pure CSS3 implements beautiful price list style code_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:261362browse

Sharing a pure CSS3 to implement a beautiful price list style code is a common host provider to publish product price information pages. The renderings are as follows:

Online preview Source code download

Implemented code.

html code:

  <div id="main">        <p style="text-align: center; padding: 30px; font-size: 16px">            <a href="index.html">DEMO 1</a>    <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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn