CSS3扁平化价格表代码怎么写

这篇文章主要介绍了CSS3扁平化价格表代码怎么写的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS3扁平化价格表代码怎么写文章都会有所收获，下面我们一起来看看吧。代码如下： 扁平化价格表样式代码 扁平化,价格表,样式代码” /> 扁平化价格表样式代码。” />

.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-c免费云主机、域名ontent: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; } }

标准型 ￥ 10 /月

硬盘空间

邮箱账号

月流量

二级域名

顶级域名 立即购买

商务型 ￥ 20 /月

硬盘空间

邮箱账号

月流量

二级域名

顶级域名 立即购买

旗舰型 ￥ 30 /月

硬盘空间

邮箱账号

月流量

二级域名

顶级域名 立即购买

至尊型 ￥ 40 /月

硬盘空间

邮箱账号

月流量

二级域名

顶级域名 立即购买 关于“CSS3扁平化价格表代码怎么写”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS3扁平化价格表代码怎么写”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云技术行业资讯频道。

相关推荐: node gyp有什么用

本篇文章为大家展示了node gyp有什么用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。本文操作环境：Windows7系统、node11.15.0版、Dell G3电脑。node gyp是干什么的？node-gyp，…