bootstrap实现5套蓝色简洁自适应价格套餐对比效果代码-html代码-BFW代码库

代码语言：html

代码描述：bootstrap实现5套蓝色简洁自适应价格套餐对比效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zxx">

<head>
    <!-- All Meta -->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="Modern Bootstrap 4 Pricing Table">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- page title -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <!--page-style css-->
    <style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900');* {    margin:0;    padding:0}.priczx a {    text-decoration:none}.priczx a:hover,a:focus {    text-decoration:none}.priczx ul{    margin:0;}.priczx li {    list-style:none}.priczx h1, .priczx h2, .priczx h3, .priczx  h4, .priczx h5, .priczx h6{    text-transform: capitalize;    line-height: 1.1;    margin: 0;}.priczx p{    margin:0;}.wrapper {    font-family: 'Roboto', sans-serif;    font-size: 15px;    line-height: 27px;    background: #e1e1e1;    color: #353940;}section.priczx{    overflow:hidden}.priczx.section-padding{    padding: 50px 0px;}/*---------------------------------------    Theme Default CSS---------------------------------------*//*---------------------------------------    .Start header section css---------------------------------------*/.priczx-header{    background: #000;    overflow: hidden;    position: relative;    padding-top: 150px;    padding-bottom: 150px;}.priczx-text h2{    color: #fff;}/*---------------------------------------    End header section css---------------------------------------*//*---------------------------------------    Start Table header css---------------------------------------*/.priczx .table-header{    margin-bottom: 60px;}.priczx .table-header h1{    color: #636363;    font-size: 46px;    text-transform: capitalize;}/*---------------------------------------    End Table header css---------------------------------------*//* Mobile Layout: 320px. */@media only screen and (max-width: 767px) {    }
    </style>
    <style>
      .priczx .pricing-area-1{    overflow: hidden;    text-align: center;    background: #fff;}.priczx .pricing-area-1 .title-area-1 .p-shape-2{    text-align: center;    background: #fff;    position: absolute;    color: #5774ee;    padding: 4px 80px;    top: 32px;    left: -65px;    transform: rotate(-44deg);    -webkit-transform: rotate(-44deg);    -moz-transform: rotate(-44deg);    -o-transform: rotate(-44deg);    -ms-transform: rotate(-44deg);}.priczx .pricing-area-1 .title-area-1 .p-shape-2 span{    padding-left: 20px;    font-size: 16px;}.priczx .pricing-area-1 .title-area-1{    overflow: hidden;    position: relative;    padding-top: 40px;    padding-bottom: 25px;    background: #5774ee;}.priczx .pricing-area-1 .title-area-1 .title-1{    margin-bottom: 20px;}.priczx .pricing-area-1 .title-area-1 .title-1 h6{    color: #fff;    font-weight: 600;}.priczx .pricing-area-1 .title-area-1 .price-1 h1{    color: #fff;    font-weight: 700;}.priczx .pricing-area-1 .price-body-1{    padding-top: 20px;    padding-bottom: 30px;}.priczx .pricing-area-1 .price-body-1 ul li{    line-height: 54px;    border-bottom: 1px solid #f2f2f2;    opacity: .8;}.priczx .pricing-area-1 .price-button-1{    margin-bottom: 22px;}.priczx .pricing-area-1 .price-button-1 .button-1{    display: inline-block;    padding: 18px 54px;    border: 1px solid #abb9f6;    font-size: 16px;    color: #5774ee;    background: #fff;    font-weight: bold;    text-transform: capitalize;    border-radius: 50px;    -webkit-transition: .5s;    -o-transition: .5s;    transition: .5s;}.priczx .pricing-area-1 .price-button-1 .button-1:hover,.priczx .pricing-area-1 .price-button-1 .button-1:focus{    background: #5774ee;    color: #fff;}/*---------------------------------------    End Table-1 section css---------------------------------------*//*---------------------------------------    Start Table-2 section css---------------------------------------*/.priczx  .pricing-area-2{    overflow: hidden;    text-align: center;    background: #fff;}.priczx .pricing-area-2 .title-area-2{    text-align: left;    padding-top: 40px;    padding-bottom: 55px;    background: #5774ee;    transform: skew(0deg -5deg) translateY(-20px);    -webkit-transform: skew(0deg, -5deg) translateY(-20px);    -moz-transform: skew(0deg, -5deg) translateY(-20px);}.priczx .pricing-area-2 .title-area-2 .title-area-content{    padding-left: 22px;    transform: skew(0deg -5deg) translateY(-20px);    -webkit-transform: skew(0deg, 5deg) translateY(20px);    -moz-transform: skew(0deg, 5deg) translateY(20px);}.priczx .pricing-area-2 .title-area-2 .title-area-content .title-2{    margin-bottom: 20px;}.priczx .pricing-area-2 .title-area-2 .title-area-content .title-2 h5{    font-size: 18px;    color: #fff;    font-weight: 600;}.priczx .pricing-area-2 .title-area-2 .title-area-content .price-2 h1{    color: #fff;    font-weight: 700;}.priczx .pricing-area-2 .title-area-2 .title-area-content .price-2 h1 span{    font-size: 16px;    opacity: .8;    co.........完整代码请登录后点击上方下载按钮下载查看