基于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 动态扩展对象之另类视角
May 25 Javascript
JavaScript 事件系统
Jul 22 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
Javascript中typeof 用法小结
May 12 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
解决vue scoped scss 无效的问题
Sep 04 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
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
python 提取key 为中文的json 串方法
2018/12/31 Python
超简单使用Python换脸实例
2019/03/27 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
如何在python中执行另一个py文件
2020/04/30 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
python能做哪方面的工作
2020/06/15 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
教师找工作推荐信
2013/11/23 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
Python开发简易五子棋小游戏
2022/05/02 Python