利用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 translate完美实现表头固定效果
Feb 28 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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语言构造器介绍
2013/07/08 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
vue3.0实现插件封装
2020/12/14 Vue.js
python将文本转换成图片输出的方法
2015/04/28 Python
python创建和删除目录的方法
2015/04/29 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
仓库管理制度
2014/01/21 职场文书
创业融资计划书
2014/04/25 职场文书
学校交通安全责任书
2014/08/25 职场文书
出纳工作检讨书
2014/10/18 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技