189 8069 5689

如何使用Bootstrap实现CSS3价格表

这篇文章给大家分享的是有关如何使用Bootstrap实现CSS3价格表的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

专业成都网站建设公司，做排名好的好网站，排在同行前面，为您带来客户和效益!创新互联建站为您提供成都网站建设，五站合一网站设计制作，服务好的网站设计公司，成都网站制作、成都网站建设、外贸营销网站建设负责任的成都网站制作公司!

先来看效果图

如何使用Bootstrap实现CSS3价格表

查看演示 下载源码

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

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

 
     
         
             
                Standard 
                 
                    per month 
                     
                        $ 
                        10 
                        99 
                     
                
                                        
  • 50GB Disk Space
    •                       
  • 50 Email Accounts
    •                       
  • 50GB Monthly Bandwidth
    •                       
  • 10 Subdomains
    •                       
  • 15 Domains
    •                                     sign up              
              
                                                Business                                        per month                                                $                          20                          99                                                                                
  • 60GB Disk Space
    •                       
  • 60 Email Accounts
    •                       
  • 60GB Monthly Bandwidth
    •                       
  • 15 Subdomains
    •                       
  • 20 Domains
    •                                     sign up                               

    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; } 
}

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

    感谢各位的阅读！关于“如何使用Bootstrap实现CSS3价格表”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


    网站名称：如何使用Bootstrap实现CSS3价格表
    标题路径：http://cdxtjz.com/article/ihhcdd.html

    其他资讯