利用Bootstrap实现漂亮简洁的CSS3价格表实例源码


Posted in HTML / CSS onMarch 02, 2017

前言

这是一款漂亮简洁的CSS3价格表样式,该价格表基于Bootstrap网格系统来进行布局,通过简单的CSS3代码来美化价格表,样式非常的时尚漂亮,且能在不同屏幕下展示良好的效果。

先来看效果图

利用Bootstrap实现漂亮简洁的CSS3价格表实例源码

首先在页面中引入bootstrap.min.css文件,这里我用官方的CDN资源,你也可以下载到本地使用。

<link rel="stylesheet" href="http//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

该css3价格表的HTML结构如下:

<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样式来进行渲染和美化。

.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 / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 #HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 #HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 #HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 #HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 #HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 #HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 #HTML / CSS
You might like
php实现利用phpexcel导出数据
2013/08/24 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
php实现微信扫码支付
2017/03/26 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
JSON格式化输出
2014/11/10 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python实现多线程的两种方式
2016/05/22 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
使用npy转image图像并保存的实例
2020/07/01 Python
python 绘制国旗的示例
2020/09/27 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
安全教育感言
2014/03/04 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
教师自查自纠材料
2014/10/14 职场文书
2014年幼师工作总结
2014/11/22 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技