html价格表源码,利用Bootstrap实现漂亮简洁的CSS3价格表实例源码

最新推荐文章于 2021-11-28 18:50:03 发布

玄玖爷

最新推荐文章于 2021-11-28 18:50:03 发布

阅读量1k

点赞数

文章标签： html价格表源码

这篇博客介绍了一种使用Bootstrap和CSS3创建的漂亮、简洁且响应式的价目表样式。通过简单的HTML结构和CSS代码，可以实现具有不同屏幕适配性的价格表，包括价格值、月度计划、功能列表和注册按钮。在各种设备上都能展示良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

这是一款漂亮简洁的CSS3价格表样式，该价格表基于Bootstrap网格系统来进行布局，通过简单的CSS3代码来美化价格表，样式非常的时尚漂亮，且能在不同屏幕下展示良好的效果。

先来看效果图

首先在页面中引入bootstrap.min.css文件，这里我用官方的CDN资源，你也可以下载到本地使用。

该css3价格表的HTML结构如下：

Standard

per month

50GB Disk Space
50 Email Accounts
50GB Monthly Bandwidth
10 Subdomains
15 Domains

Business

per month

60GB Disk Space
60 Email Accounts
60GB Monthly Bandwidth
15 Subdomains
20 Domains

CSS3

为该价格表添加下面的CSS样式来进行渲染和美化。

.pricingTable{

text-align: center;

background: #fff;

padding: 30px 0;

}

.pricingTable .title{

font-size: 22px;

font-weight: 600;

color: #2e282a;

text-transform: uppercase;

margin: 0 0 30px 0;

}

.pricingTable .price-value{

padding: 30px 0;

background: #ba5289;

margin-bottom: 30px;

position: relative;

}

.pricingTable .price-value:before{

content: "";

border-top: 15px solid #fff;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

position: absolute;

top: 0;

left: 46%;

}

.pricingTable .month{

display: block;

height: 50px;

font-size: 15px;

font-weight: 900;

color: #fff;

text-transform: uppercase;

}

.pricingTable .amount{

display: inline-block;

font-size: 50px;

color: #fff;

position: relative;

}

.pricingTable .currency{

position: absolute;

top: -1px;

left: -35px;

}

.pricingTable .value{

font-size: 20px;

position: absolute;

top: -11px;

right: -27px;

}

.pricingTable .pricing-content{

padding: 0;

margin: 0 0 30px 0;

list-style: none;

}

.pricingTable .pricing-content li{

font-size: 16px;

color: #868686;

line-height: 35px;

}

.pricingTable .pricingTable-signup{

display: inline-block;

padding: 8px 40px;

background: #fca4a7;

font-size: 15px;

font-weight: 600;

color: #fff;

text-transform: capitalize;

border: 2px solid #fca4a7;

border-radius: 30px;

transition: all 0.5s ease 0s;

}

.pricingTable .pricingTable-signup:hover{

background: #fff;

color: #fca4a7;

}

@media only screen and (max-width: 990px){

.pricingTable{ margin-bottom: 30px; }

}

现在你可以打开浏览器看看效果了，手机上效果也不错的。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。