纯CSS的4个静态的价格表

一款纯CSS的4个静态的价格表，当前突出显示的样式与其他3个不同，这个适用于多种类型的服务价目显示上，应用还时比较广泛的，喜欢的童鞋请收下吧。

分类：html/css > 按钮难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需远程调用一个CSS文件，并引入一个本地CSS文件，代码如下：

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，分别用4个li标签放入四种不同的价目类型，全部元素统一放置在一个div容器里，代码如下：

<div class="wrap">
<div class="table">
<ul>
<li>
  <div class="top">
    <h1>尝鲜版</h1>
    <div class="circle">¥19</div>
  </div>
  <div class="bottom">
    <p><span>5</span> 用户</p>
    <p><span>10</span> 项目</p>
    <p><span>10GB</span> 空间</p>
    <p><span>5</span> 邮箱</p>
    <div class="sign">
    <a href='#' class='button'>立即注册</a>
    </div>
  </div>
</li>
  
<li>
  <div class="top">
    <h1>基础版</h1>
    <div class="circle">¥29</div>
  </div>
    <div class="bottom">
    <p><span>10</span> 用户</p>
    <p><span>50</span> 项目</p>
    <p><span>50GB</span> 空间</p>
    <p><span>10</span> 邮箱</p>
    <div class="sign">
    <a href='#' class='button'>立即注册</a>
    </div>
  </div>
</li>
  
<li>
  <div class="top purple white">
    <h1>专业版</h1>
    <div class="circle pink">¥49</div>
  </div>
    <div class="bottom">
    <p><span>100</span> 用户</p>
    <p><span>无限</span> 项目</p>
    <p><span>1TB</span> 空间</p>
    <p><span>100</span> 邮箱</p>
    <div class="sign">
    <a href='#' class="button purple" style="color:white;">立即注册</a>
    </div>
  </div>
</li>
  
<li>
  <div class="top">
    <h1>尊享版</h1>
    <div class="circle">¥99</div>
  </div>
    <div class="bottom">
    <p><span>无限</span> 用户</p>
    <p><span>无限</span> 项目</p>
    <p><span>无限</span> 空间</p>
    <p><span>无限</span> 邮箱</p>
    <div class="sign">
    <a href='#' class='button'>立即注册</a>
    </div>
  </div>
</li>
</ul>
</div>
</div>