广告

兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册
PS教程

CSS3扁平化价格表样式代码

[复制链接]
tuyuanma 发表于 2017-1-20 18:46:39 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


<!DOCTYPE html>
<html lang="zh">
<head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>CSS3扁平化价格表样式代码</title>
         <meta name="keywords" content="CSS3,扁平化,价格表,样式代码" />
         <meta name="description" content="CSS3扁平化价格表样式代码。" />
         <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
         <link rel="stylesheet" type="text/css" href="css/demo.css">
         <link rel="stylesheet" href="css/font-awesome.min.css">

         <style type="text/css">
         .pricingTable{
             text-align: center;
         }
         .pricingTable .pricingTable-header{
             padding: 30px 0;
             background: #4d4d4d;
             position: relative;
             transition: all 0.3s ease 0s;
         }
         .pricingTable:hover .pricingTable-header{
             background: #09b2c6;
         }
         .pricingTable .pricingTable-header:before,
         .pricingTable .pricingTable-header:after{
             content: "";
             width: 16px;
             height: 16px;
             border-radius: 50%;
             border: 1px solid #d9d9d8;
             position: absolute;
             bottom: 12px;
         }
         .pricingTable .pricingTable-header:before{
             left: 40px;
         }
         .pricingTable .pricingTable-header:after{
             right: 40px;
         }
         .pricingTable .heading{
             font-size: 20px;
             color: #fff;
             text-transform: uppercase;
             letter-spacing: 2px;
             margin-top: 0;
         }
         .pricingTable .price-value{
             display: inline-block;
             position: relative;
             font-size: 55px;
             font-weight: bold;
             color: #09b1c5;
             transition: all 0.3s ease 0s;
         }
         .pricingTable:hover .price-value{
             color: #fff;
         }
         .pricingTable .currency{
             font-size: 30px;
             font-weight: bold;
             position: absolute;
             top: 6px;
             left: -19px;
         }
         .pricingTable .month{
             font-size: 16px;
             color: #fff;
             position: absolute;
             bottom: 15px;
             right: -30px;
             text-transform: uppercase;
         }
         .pricingTable .pricing-content{
             padding-top: 50px;
             background: #fff;
             position: relative;
         }
         .pricingTable .pricing-content:before,
         .pricingTable .pricing-content:after{
             content: "";
             width: 16px;
             height: 16px;
             border-radius: 50%;
             border: 1px solid #7c7c7c;
             position: absolute;
             top: 12px;
         }
         .pricingTable .pricing-content:before{
             left: 40px;
         }
         .pricingTable .pricing-content:after{
             right: 40px;
         }
         .pricingTable .pricing-content ul{
             padding: 0 20px;
             margin: 0;
             list-style: none;
         }
         .pricingTable .pricing-content ul:before,
         .pricingTable .pricing-content ul:after{
             content: "";
             width: 8px;
             height: 46px;
             border-radius: 3px;
             background: linear-gradient(to bottom,#818282 50%,#727373 50%);
             position: absolute;
             top: -22px;
             z-index: 1;
             box-shadow: 0 0 5px #707070;
             transition: all 0.3s ease 0s;
         }
         .pricingTable:hover .pricing-content ul:before,
         .pricingTable:hover .pricing-content ul:after{
             background: linear-gradient(to bottom, #40c4db 50%, #34bacc 50%);
         }
         .pricingTable .pricing-content ul:before{
             left: 44px;
         }
         .pricingTable .pricing-content ul:after{
             right: 44px;
         }
         .pricingTable .pricing-content ul li{
             font-size: 15px;
             font-weight: bold;
             color: #777473;
             padding: 10px 0;
             border-bottom: 1px solid #d9d9d8;
         }
         .pricingTable .pricing-content ul li:last-child{
             border-bottom: none;
         }
         .pricingTable .read{
             display: inline-block;
             font-size: 16px;
             color: #fff;
             text-transform: uppercase;
             background: #d9d9d8;
             padding: 8px 25px;
             margin: 30px 0;
             transition: all 0.3s ease 0s;
         }
         .pricingTable .read:hover{
             text-decoration: none;
         }
         .pricingTable:hover .read{
             background: #09b1c5;
         }
         @media screen and (max-width: 990px){
             .pricingTable{ margin-bottom: 25px; }
         }
         </style>
         <!--[if IE]>
                   <script src="js/html5shiv.min.js"></script>
         <![endif]-->
</head>
<body>
        
         <div class="demo" style="background:#c0bfbf;padding: 1em 0;">
                   <div class="container">
                            <div class="row">
                                     <div class="col-md-3 col-sm-6">
                                               <div class="pricingTable">
                                                        <div class="pricingTable-header">
                                                                 <h3 class="heading">标准型</h3>
                                                                 <span class="price-value">
                                                                           <span class="currency">¥</span> 10
                                                                           <span class="month">/月</span>
                                                                 </span>
                                                        </div>
                                                        <div class="pricing-content">
                                                                 <ul>
                                                                           <li>50GB 硬盘空间</li>
                                                                           <li>50 邮箱账号</li>
                                                                           <li>50GB 月流量</li>
                                                                           <li>10 二级域名</li>
                                                                           <li>15 顶级域名</li>
                                                                 </ul>
                                                                 <a href="#" class="read">立即购买</a>
                                                        </div>
                                               </div>
                                     </div>

                                     <div class="col-md-3 col-sm-6">
                                               <div class="pricingTable">
                                                        <div class="pricingTable-header">
                                                                 <h3 class="heading">商务型</h3>
                                                                 <span class="price-value">
                                                                           <span class="currency">¥</span> 20
                                                                           <span class="month">/月</span>
                                                                 </span>
                                                        </div>
                                                        <div class="pricing-content">
                                                                 <ul>
                                                                           <li>60GB 硬盘空间</li>
                                                                           <li>60 邮箱账号</li>
                                                                           <li>60GB 月流量</li>
                                                                           <li>15 二级域名</li>
                                                                           <li>20 顶级域名</li>
                                                                 </ul>
                                                                 <a href="#" class="read">立即购买</a>
                                                        </div>
                                               </div>
                                     </div>

                                     <div class="col-md-3 col-sm-6">
                                               <div class="pricingTable">
                                                        <div class="pricingTable-header">
                                                                 <h3 class="heading">旗舰型</h3>
                                                                 <span class="price-value">
                                                                           <span class="currency">¥</span> 30
                                                                           <span class="month">/月</span>
                                                                 </span>
                                                        </div>
                                                        <div class="pricing-content">
                                                                 <ul>
                                                                           <li>70GB 硬盘空间</li>
                                                                           <li>70 邮箱账号</li>
                                                                           <li>70GB 月流量</li>
                                                                           <li>20 二级域名</li>
                                                                           <li>25 顶级域名</li>
                                                                 </ul>
                                                                 <a href="#" class="read">立即购买</a>
                                                        </div>
                                               </div>
                                     </div>

                                     <div class="col-md-3 col-sm-6">
                                               <div class="pricingTable">
                                                        <div class="pricingTable-header">
                                                                 <h3 class="heading">至尊型</h3>
                                                                 <span class="price-value">
                                                                           <span class="currency">¥</span> 40
                                                                           <span class="month">/月</span>
                                                                 </span>
                                                        </div>
                                                        <div class="pricing-content">
                                                                 <ul>
                                                                           <li>80GB 硬盘空间</li>
                                                                           <li>80 邮箱账号</li>
                                                                           <li>80GB 月流量</li>
                                                                           <li>25 二级域名</li>
                                                                           <li>30 顶级域名</li>
                                                                 </ul>
                                                                 <a href="#" class="read">立即购买</a>
                                                        </div>
                                               </div>
                                     </div>
                            </div>
                   </div>
         </div>
        
</body>
</html>



版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2018-12-19 17:53
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表