宜宾网站建设公司

基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

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

目前创新互联已为数千家的企业提供了网站建设、域名、网页空间、网站运营、企业网站设计、宜春网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

查看演示     下载源码

HTML

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

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


  

    

      

        
Standard

        

          per month
          
            $
            10
            99
          
        

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

        
      

    

    

      

        
Business

        

          per month
          
            $
            20
            99
          
        

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

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

以上所述是小编给大家介绍的基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！


文章标题：基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
标题URL：http://ybzwz.com/article/gpheie.html

其他资讯