利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
发布时间:2017-03-02 15:54:42 作者:helloweba 我要评论
这篇文章主要介绍了利用Bootstrap实现漂亮简洁的CSS3价格表效果,实现的效果非常的不错,而且能够使用不同的屏幕尺寸,需要的朋友可以参考学习,下面来一起看看吧。
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
前言
这是一款漂亮简洁的CSS3价格表样式,该价格表基于Bootstrap网格系统来进行布局,通过简单的CSS3代码来美化价格表,样式非常的时尚漂亮,且能在不同屏幕下展示良好的效果。
先来看效果图
首先在页面中引入bootstrap.min.css文件,这里我用官方的CDN资源,你也可以下载到本地使用。
1 | < link rel = "stylesheet" href = "http//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" > |
该css3价格表的HTML结构如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | < div class = "container" > < div class = "row" > < div class = "col-md-4 col-sm-6" > < div class = "pricingTable" > < h3 class = "title" >Standard</ h3 > < div class = "price-value" > < span class = "month" >per month</ span > < span class = "amount" > < span class = "currency" >$</ span > 10 < span class = "value" >99</ span > </ span > </ div > < ul class = "pricing-content" > < li >50GB Disk Space</ li > < li >50 Email Accounts</ li > < li >50GB Monthly Bandwidth</ li > < li >10 Subdomains</ li > < li >15 Domains</ li > </ ul > < a href = "#" class = "pricingTable-signup" >sign up</ a > </ div > </ div > < div class = "col-md-4 col-sm-6" > < div class = "pricingTable" > < h3 class = "title" >Business</ h3 > < div class = "price-value" > < span class = "month" >per month</ span > < span class = "amount" > < span class = "currency" >$</ span > 20 < span class = "value" >99</ span > </ span > </ div > < ul class = "pricing-content" > < li >60GB Disk Space</ li > < li >60 Email Accounts</ li > < li >60GB Monthly Bandwidth</ li > < li >15 Subdomains</ li > < li >20 Domains</ li > </ ul > < a href = "#" class = "pricingTable-signup" >sign up</ a > </ div > </ div > </ div > </ div > |
CSS3
为该价格表添加下面的CSS样式来进行渲染和美化。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | .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.5 s ease 0 s; } .pricingTable .pricingTable-signup:hover{ background : #fff ; color : #fca4a7 ; } @media only screen and ( max-width : 990px ){ .pricingTable{ margin-bottom : 30px ; } } |
现在你可以打开浏览器看看效果了,手机上效果也不错的。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
- 基于Bootstrap的炫酷纯CSS3响应式垂直时间轴特效代码,查询来在不同的断点下,对时间点时间面板进行排列2017-02-24
- 该隐藏侧边栏特效通过汉堡包按钮来打开和关闭侧边栏菜单,并通过CSS3来制作平滑的过渡动画效果,欢迎下载使用2016-10-14
CSS3+Bootstrap制作简约炫酷进度条UI动画特效源码
CSS3+Bootstrap制作简约炫酷进度条UI动画特效源码是一款在原生Bootstrap进度条组件的基础上,通过简单CSS3代码制作出炫酷的进度条动画特效,需要的朋友前来下载源码2016-06-27- Bootstrap+CSS3实现Tabs选项卡切换特效源码是一款通过简单的CSS3代码,将Bootstrap选项卡渲染出非常炫酷的效果。效果非常棒,有需要的朋友可以直接下载使用2016-06-23
CSS3 Bootstrap炫酷飞机和跑道样式进度条动画特效源码
这是一个基于CSS3 Bootstrap的网格系统和进度条组件来制作的炫酷飞机和跑道样式进度条动画特效的代码,带进度数值显示2016-05-30
最新评论