在Bootstrap上实现漂亮简洁的CSS3价格表

发布时间:2021-08-09 09:56:16 作者:chen
来源:亿速云 阅读:130

这篇文章主要讲解了“在Bootstrap上实现漂亮简洁的CSS3价格表”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“在Bootstrap上实现漂亮简洁的CSS3价格表”吧!

HTML

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

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

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

<p class="container">    <p class="row">        <p class="col-md-4 col-sm-6">            <p class="pricingTable">                <h4 class="title">Standard</h4>                <p class="price-value">                    <span class="month">per month</span>                    <span class="amount">                        <span class="currency">$</span>                        10                        <span class="value">99</span>                    </span>                </p>                <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>            </p>        </p>        <p class="col-md-4 col-sm-6">            <p class="pricingTable">                <h4 class="title">Business</h4>                <p class="price-value">                    <span class="month">per month</span>                    <span class="amount">                        <span class="currency">$</span>                        20                        <span class="value">99</span>                    </span>                </p>                <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>            </p>        </p>    </p> </p>

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价格表这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. CSS3制作漂亮的照片墙
  2. 基于BootStrap实现简洁注册界面

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

bootstrap css3

上一篇:Html5多线程开发之WebWorkers的示例分析

下一篇:如何处理防止页面url缓存中ajax中post请求

相关阅读

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

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