利用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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 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
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
js获取ip和地区
2017/03/10 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
python数据结构之图的实现方法
2015/07/08 Python
django 创建过滤器的实例详解
2017/08/14 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python 三元运算符使用解析
2019/09/16 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
python退出循环的方法
2020/06/18 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
奉献演讲稿范文
2014/05/21 职场文书
教育见习报告范文
2014/11/03 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2019大学生实习报告
2019/06/21 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server