你的位置:首页 > 软件开发 > Java > 纯CSS3实现漂亮的价格表样式代码

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

发布时间:2015-04-28 12:00:20
分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页。效果图如下:在线预览 源码下载实现的代码。html代码: <div id="main"> <p style="text-align ...

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

分享一款纯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>

原标题:纯CSS3实现漂亮的价格表样式代码

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。