Maison > interface Web > tutoriel HTML > 纯CSS3实现漂亮的价格表样式代码_html/css_WEB-ITnose

纯CSS3实现漂亮的价格表样式代码_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:45:26
original
1395 Les gens l'ont consulté

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

在线预览   源码下载

实现的代码。

html代码:

  <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>
Copier après la connexion

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal