星空网 > 软件开发 > 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 (#换成@)。

2019中国出海品牌50强新鲜出炉!:https://www.ikjzd.com/articles/91319
德国用户喜欢什么类型网站,企业又如何抢占市场份额?:https://www.ikjzd.com/articles/91320
Shopee2019Q2销量新引擎:49个高产子类目任选!:https://www.ikjzd.com/articles/91322
亚马逊无货源店群模式真的有发展前景吗?:https://www.ikjzd.com/articles/91323
KOL网红营销到底如何营?如何销?:https://www.ikjzd.com/articles/91326
亚马逊新手卖家常遇的Amazon Listing误区及优化策略!:https://www.ikjzd.com/articles/91327
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流