CSS3扁平化价格表样式代码

2019-09-11 郑州网站建设  

<!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=http://www.divcss5.com/html/"css/bootstrap-grid.min.css" />

         <link rel="stylesheet" type="text/css" href=http://www.divcss5.com/html/"css/demo.css">

         <link rel="stylesheet" href=http://www.divcss5.com/html/"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]>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1934.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • lang
  • CSS3