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

WBOY
Release: 2016-06-24 11:45:26
Original
1366 people have browsed it

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>
Copy after login

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

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template