zoukankan      html  css  js  c++  java
  • 纯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

  • 相关阅读:
    Kotlin技术入门以及和Java对比.md
    最新版Charles破解方法(Mac+Windows).md
    阿里移动云专场专题.md
    win10下 github+hexo搭建个人博客.md
    Java内存回收机制.md
    基于补偿的数据库分布式事务实践
    Log4J,在踩坑中升级版本
    关于服务注册与发现
    JVM内存模型-重排序&内存屏障
    GC初识
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4462102.html
Copyright © 2011-2022 走看看