纯CSS3实现漂亮的价格表样式代码
2023-09-27 14:28:19 时间
分享一款纯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>
相关文章
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
- 【一起来烧脑】一步学会CSS3体系
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 第 1 章 网络平台
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——1.6 小结
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——2.3 下载和安装NimbleKit
- 《HTML5与CSS3实战指南》——1.4 什么是CSS3
- 本周推荐7款CSS3实现的动态特效
- CSS3 优惠券
- CSS3&JavaScript 电池充电