这篇文章主要介绍了利用Bootstrap实现漂亮简洁的CSS3价格表效果，实现的效果非常的不错，而且能够使用不同的屏幕尺寸，需要的朋友可以参考学习，下面来一起看看吧。
前言
这是一款漂亮简洁的CSS3价格表样式，该价格表基于Bootstrap网格系统来进行布局，通过简单的CSS3代码来美化价格表，样式非常的时尚漂亮，且能在不同屏幕下展示良好的效果。
先来看效果图
查看演示 下载源码
首先在页面中引入bootstrap.min.css文件，这里我用官方的CDN资源，你也可以下载到本地使用。
该css3价格表的HTML结构如下：
Standard
per month $ 10 99
- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 10 Subdomains
- 15 Domains
Business
per month $ 20 99
- 60GB Disk Space
- 60 Email Accounts
- 60GB Monthly Bandwidth
- 15 Subdomains
- 20 Domains
CSS3
为该价格表添加下面的CSS样式来进行渲染和美化。
.pricingTable{ text-align: center; background: #fff; padding: 30px 0; } .pricingTable .title{ font-size: 22px; font-weight: 600; color: #2e282a; text-transform: uppercase; margin: 0 0 30px 0; } .pricingTable .price-value{ padding: 30px 0; background: #ba5289; margin-bottom: 30px; position: relative; } .pricingTable .price-value:before{ content: ""; border-top: 15px solid #fff; border-left: 15px solid transparent; border-right: 15px solid transparent; position: absolute; top: 0; left: 46%; } .pricingTable .month{ display: block; height: 50px; font-size: 15px; font-weight: 900; color: #fff; text-transform: uppercase; } .pricingTable .amount{ display: inline-block; font-size: 50px; color: #fff; position: relative; } .pricingTable .currency{ position: absolute; top: -1px; left: -35px; } .pricingTable .value{ font-size: 20px; position: absolute; top: -11px; right: -27px; } .pricingTable .pricing-content{ padding: 0; margin: 0 0 30px 0; list-style: none; } .pricingTable .pricing-content li{ font-size: 16px; color: #868686; line-height: 35px; } .pricingTable .pricingTable-signup{ display: inline-block; padding: 8px 40px; background: #fca4a7; font-size: 15px; font-weight: 600; color: #fff; text-transform: capitalize; border: 2px solid #fca4a7; border-radius: 30px; transition: all 0.5s ease 0s; } .pricingTable .pricingTable-signup:hover{ background: #fff; color: #fca4a7; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } }
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
Bootstrap教程
CSS有几种实现三栏布局的方法
CSS与Sass开发规范
以上就是Bootstrap实现价格表的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609583.html
微信扫一扫 
支付宝扫一扫 
