[科技]純CSS3實現漂亮的價格表樣式代碼
分享一款純CSS3實現漂亮的價格表樣式代碼是一款常見的主機商發布產品價格信息頁。效果圖如下：
實現的代碼。
html代碼：
<div id="main">
<p style="text-align: center; padding: 30px; font-size: 16px">
<a href="index.html">DEMO 1</a> <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>