星空网 > 软件开发 > Java

纯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>

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




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

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流