温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何使用Bootstrap实现CSS3价格表

发布时间:2021-06-30 14:30:36 阅读:172 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

先来看效果图

如何使用Bootstrap实现CSS3价格表

查看演示 下载源码

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

<link rel="stylesheet" href="http//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

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

<div class="container"> 
    <div class="row"> 
        <div class="col-md-4 col-sm-6"> 
            <div class="pricingTable"> 
                <h4 class="title">Standard</h4> 
                <div class="price-value"> 
                    <span class="month">per month</span> 
                    <span class="amount"> 
                        <span class="currency">$</span> 
                        10 
                        <span class="value">99</span> 
                    </span> 
                </div> 
                <ul class="pricing-content"> 
                    <li>50GB Disk Space</li> 
                    <li>50 Email Accounts</li> 
                    <li>50GB Monthly Bandwidth</li> 
                    <li>10 Subdomains</li> 
                    <li>15 Domains</li> 
                </ul> 
                <a href="#" class="pricingTable-signup">sign up</a> 
            </div> 
        </div> 
 
        <div class="col-md-4 col-sm-6"> 
            <div class="pricingTable"> 
                <h4 class="title">Business</h4> 
                <div class="price-value"> 
                    <span class="month">per month</span> 
                    <span class="amount"> 
                        <span class="currency">$</span> 
                        20 
                        <span class="value">99</span> 
                    </span> 
                </div> 
                <ul class="pricing-content"> 
                    <li>60GB Disk Space</li> 
                    <li>60 Email Accounts</li> 
                    <li>60GB Monthly Bandwidth</li> 
                    <li>15 Subdomains</li> 
                    <li>20 Domains</li> 
                </ul> 
                <a href="#" class="pricingTable-signup">sign up</a> 
            </div> 
        </div> 
    </div> 
</div>

CSS3

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

.pricingTable{ 
    text-align: center; 
    background#fff; 
    padding30px 0; 
} 
.pricingTable .title{ 
    font-size22px; 
    font-weight600; 
    color#2e282a; 
    text-transform: uppercase; 
    margin0 0 30px 0; 
} 
.pricingTable .price-value{ 
    padding30px 0; 
    background#ba5289; 
    margin-bottom30px; 
    position: relative; 
} 
.pricingTable .price-value:before{ 
    content""; 
    border-top15px solid #fff; 
    border-left15px solid transparent; 
    border-right15px solid transparent; 
    position: absolute; 
    top0; 
    left46%; 
} 
.pricingTable .month{ 
    display: block; 
    height50px; 
    font-size15px; 
    font-weight900; 
    color#fff; 
    text-transform: uppercase; 
} 
.pricingTable .amount{ 
    display: inline-block; 
    font-size50px; 
    color#fff; 
    position: relative; 
} 
.pricingTable .currency{ 
    position: absolute; 
    top: -1px; 
    left: -35px; 
} 
.pricingTable .value{ 
    font-size20px; 
    position: absolute; 
    top: -11px; 
    right: -27px; 
} 
.pricingTable .pricing-content{ 
    padding0; 
    margin0 0 30px 0; 
    list-style: none; 
} 
.pricingTable .pricing-content li{ 
    font-size16px; 
    color#868686; 
    line-height35px; 
} 
.pricingTable .pricingTable-signup{ 
    display: inline-block; 
    padding8px 40px; 
    background#fca4a7; 
    font-size15px; 
    font-weight600; 
    color#fff; 
    text-transform: capitalize; 
    border2px solid #fca4a7; 
    border-radius30px; 
    transition: all 0.5s ease 0s; 
} 
.pricingTable .pricingTable-signup:hover{ 
    background#fff; 
    color#fca4a7; 
} 
@media only screen and (max-width990px){ 
    .pricingTablemargin-bottom30px; } 
}

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

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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/538050.html

AI

开发者交流群×