网站建设资讯

NEWS

网站建设资讯

如何使用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://njwzjz.com/article/ihhcdd.html