<!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> |
