基于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 相关文章推荐
JavaScript 字符串乘法
Aug 20 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
JavaScript函数详解
Feb 27 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
vue实现图书管理系统
Dec 29 Vue.js
基于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
基于文本的访客签到簿
2006/10/09 PHP
php中的strpos使用示例
2014/02/27 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python 文件读写操作实例详解
2014/03/12 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
模特职业生涯规划范文
2014/02/26 职场文书
师德师风演讲稿
2014/05/05 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
家访教师心得体会
2016/01/23 职场文书
如何写好活动总结
2019/06/21 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
JavaScript流程控制(分支)
2021/12/06 Javascript