首页 / 知识

CSS3扁平化价格表样式代码

2023-04-11 16:06:00

CSS3扁平化价格表样式代码

 

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

扁平化价格表样式代码zhhead

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢