基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)


Posted in Javascript onFebruary 28, 2017

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

基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

查看演示     下载源码

HTML

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

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

该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="#" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" 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; }
}

现在你可以打开浏览器看看效果了,手机上效果也不错的。

以上所述是小编给大家介绍的基于Bootstrap漂亮简洁的CSS3价格表(附源码下载),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
用js实现放大镜效果
Oct 28 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 #Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 #Javascript
原生js实现可拖拽效果
Feb 28 #Javascript
javascript 面向对象function详解及实例代码
Feb 28 #Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 #Javascript
原生js实现鼠标跟随效果
Feb 28 #Javascript
canvas实现简易的圆环进度条效果
Feb 28 #Javascript
You might like
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP排序算法类实例
2015/06/17 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
Bootstrap基础学习
2015/06/16 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
canvas实现钟表效果
2017/02/13 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
vue实现axios图片上传功能
2019/08/20 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
校园文化建设方案
2014/02/03 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python