html价格表源码,利用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
sign up
Business
per month
$
20
99
- 60GB Disk Space
- 60 Email Accounts
- 60GB Monthly Bandwidth
- 15 Subdomains
- 20 Domains
sign up
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; }
}
现在你可以打开浏览器看看效果了,手机上效果也不错的。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
html价格表源码,利用Bootstrap实现漂亮简洁的CSS3价格表实例源码相关推荐
- 【iapp源码】UI界面很简洁的方盒子iapp源码
分享一个UI界面很简洁的方盒子iapp源码,非常适合拿来做工具箱的, 这个UI源码已经很久的了,在网上看到的,就拿出来再分享一下吧!
- Android最新版支付宝钱包的实例源码
Android应用支付宝支付究竟是什么做的呢,相信很多朋友对这个问题感兴趣,如果你要是做过了话你可能就会觉得,支付宝也就这么回事,但是对于没做过的朋友可能会觉得,很高大上,觉得做出来的人好叼哦,其实接 ...
- 基于Flask+bootstrap+sqlite开发宝宝成长管理系统,宝宝成长记录系统源码
BabyLog 岁月如风,唯有此忆, 任凭时光匆匆,记录点点滴滴. 当爸爸了,就多陪陪孩子,有事没事的记些东西,不要总把心思放在程序编码上,也多陪陪孩子! 记录了那么多条数据,是时候也为孩子回忆做个数 ...
- (已更新)社区论坛小程序源码,功能齐全,简洁漂亮,前端+后端
源码已测试,无bug功能均可正常访问使用,页面简洁漂亮,另外现在类目选择社区/论坛类目时,不再需要<增值电信业务经营许可证> ,只需提供企业/单位ICP备案截图即可,大大降低了社区/论坛小 ...
- (含源码)利用NVIDIA VPI之透视变换
(含源码)利用NVIDIA VPI之透视变换 更多精彩内容: https://www.nvidia.cn/gtc-global/?ncid=ref-dev-876561 文章目录 (含源码)利用NVI ...
- 直播带货系统源码利用FloatingActionButton实现 展开/折叠多级悬浮菜单
直播带货系统源码利用FloatingActionButton实现 展开/折叠多级悬浮菜单的相关代码 1.大家看一下,我们最终提供出来的调用的示例: //初始化2个Item弹出菜单 val expand ...
- 分享8款最新超酷HTML5/CSS3特效及源码
这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效.HTML5焦点图特效.CSS3/HTML5进度条特效等类型,一起来看看吧. 1.CSS3/jQuery全屏立体焦 ...
- 8款最新超酷HTML5/CSS3特效及源码
这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效.HTML5焦点图特效.CSS3/HTML5进度条特效等类型,一起来看看吧. 1.CSS3/jQuery全屏立体焦 ...
- axis2 webservice入门学识(JS,Java,PHP调用实例源码)
来源:http://www.myexception.cn/web/952419.html axis2 webservice入门知识(JS,Java,PHP调用实例源码) 背景简介 最近接触到一个银行接 ...
最新文章
- 目标板挂载NFS方法及错误解决
- 如何发布打印机文件夹及ICA 客户端打印机配置工具
- SAP数据分析图形相关内容
- CodeForces - 1355C Count Triangles(数学)
- 鸿蒙os开源邀请全球开发者,全场景无缝连接 鸿蒙OS开源邀请全球开发者共助生态发展...
- 基于特征的对抗迁移学习论文_[论文笔记] 对抗样本不是bugs,而是特征
- 黑客编程为什么首选Python语言?这个高速你答案!
- matlab中的[~,m]=size(coord)是什么意思
- vue 大屏滚动实现 利用marquee和element-ui table
- CIO,你想做一辈子“消防员”吗?
- ESP分区引导文件修复bcdboot .exe
- 进度图绘制十大注意事项
- This relative module was not found: Error: Can‘t resolve ‘../assets/bg.jpg‘
- 交互设计:依据用户体验要素知识点,进行APP的分析和改良设计。
- Excel怎样把相同列数据合并到一行
- MFC应用模态对话框和非模态对话框
- Rtthread学习笔记(十八)RT-Thread Studio添加freemodbus主机和从机
- 使用百度定位无法初始化问题
- 「诗经」主题文化数字藏品中奖名单公布
- 安装完svn客户端后在bin目录中没有svn.exe文件
热门文章
- linux jdk 编码格式,java中文编码(字符集)分析-中文乱码分析及解决方案
- c语言三种插入排序算法
- 使用index+Match函数组合实现反向、双向等复杂的表格查找
- mysql8版本升级(无损升级)8.0.20升级到8.0.21
- 小米5x显示连接不上服务器怎么办,MIUI8/小米手机连不上网怎么办?解决办法介绍...
- linux中df命令用法,详细分析Linux df命令的使用方法
- 安卓系统蓝牙服务com.android.bluetooth的使能
- Python直接控制鼠标键盘模块 pyautogui
- 我知道你不知道我知道你不知道我知道你不知道
- 用户认证与授权(三):用户授权