bootstrap实现5套蓝色简洁自适应价格套餐对比效果代码
代码语言：html
所属分类：布局界面
代码描述：bootstrap实现5套蓝色简洁自适应价格套餐对比效果代码
代码标签： bootstrap 蓝色 简洁 自适应 价格 套餐 对比
下面为部分代码预览，完整代码请点击下载或在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; color: #fff;}.priczx .pricing-area-2 .price-body-2{ padding-top: 20px; padding-bottom: 30px;}.priczx .pricing-area-2 .price-body-2 ul li{ line-height: 54px; border-bottom: 1px solid #f2f2f2; opacity: .8;}.priczx .pricing-area-2 .price-button-2{ margin-bottom: 22px;}.priczx .pricing-area-2 .price-button-2 .button-2{ display: inline-block; padding: 18px 54px; border: 1px solid #abb9f6; font-size: 16px; color: #fff; background: #5774ee; font-weight: bold; text-transform: capitalize; border-radius: 50px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s;}.priczx .pricing-area-2 .price-button-2 .button-2:hover,.priczx .pricing-area-2 .price-button-2 .button-2:focus{ background: #fff; color: #5774ee;}/*--------------------------------------- End Table-2 section css---------------------------------------*//*--------------------------------------- Start Table-3 section css---------------------------------------*/.priczx .pricing-area-3{ overflow: hidden; position: relative; text-align: center; background: #fff;}.priczx .pricing-area-3 .title-area-3 .p-shape{ text-align: center; background: #5774ee; position: absolute; color: #FFF; 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-3 .title-area-3 .p-shape span{ padding-left: 20px; font-size: 16px;}.priczx .pricing-area-3 .title-area-3{ overflow: hidden; position: relative; padding-top: 40px; padding-bottom: 25px; background: #fff;}.priczx .pricing-area-3 .title-area-3 .title-3{ margin-bottom: 20px;}.priczx .pricing-area-3 .title-area-3 .title-3 h6{ color: #2b2c2d; font-weight: 500;}.priczx .pricing-area-3 .title-area-3 .price-3 h1{ color: #2b2c2d; font-weight: 700;}.priczx .pricing-area-3 .price-body-3{ padding-top: 20px; padding-bottom: 30px;}.priczx .pricing-area-3 .price-body-3 ul li{ line-height: 54px;}.priczx .pricing-area-3 .price-body-3 ul li span{ opacity: .8;}.priczx .pricing-area-3 .dark-li{ background: #f9f9f9;}.priczx .pricing-area-3 .price-button-3{ margin-bottom: 22px;}.priczx .pricing-area-3 .price-button-3 .button-3{ display: inline-block; padding: 18px 54px; border: 1px solid #abb9f6; font-size: 16px; color: #fff; background: #5774ee; font-weight: bold; text-transform: capitalize; border-radius: 50px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s;}.priczx .pricing-area-3 .price-button-3 .button-3:hover,.priczx .pricing-area-3 .price-button-3 .button-3:focus{ background: #fff; color: #5774ee;}/*--------------------------------------- End Table-3 section css---------------------------------------*//*--------------------------------------- Start Table-4 section css---------------------------------------*/.priczx .pricing-area-4{ overflow: hidden; text-align: center; background: #fff;}.priczx .pricing-area-4 .title-area-4 .p-shape-3 { text-align: center; background: #fff; position: absolute; color: #5774ee; padding: 4px 80px; top: 32px; right: -65px; transform: rotate(-44deg); -webkit-transform: rotate(44deg); -moz-transform: rotate(44deg); -o-transform: rotate(44deg); -ms-transform: rotate(44deg);}.priczx .pricing-area-4 .title-area-4 .p-shape-3 span { padding-right: 10px; font-size: 16px;}.priczx .pricing-area-4 .title-area-4{ overflow: hidden; position: relative; padding-top: 40px; padding-bottom: 25px; background: #5774ee;}.priczx .pricing-area-4 .title-area-4 .title-4{ margin-bottom: 20px;}.priczx .pricing-area-4 .title-area-4 .title-4 h6{ color: #fff; font-weight: 600;}.priczx .pricing-area-4 .title-area-4 .price-4 h1{ color: #fff; font-weight: 700;}.priczx .pricing-area-4 .price-body-4 ul li{ background: #5775ee; background: -moz-linear-gradient(top, #5775ee 0%, #6a85fe 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #5775ee), color-stop(100%, #6a85fe)); background: -webkit-linear-gradient(top, #5775ee 0%, #6a85fe 100%); background: -o-linear-gradient(top, #5775ee 0%, #6a85fe 100%); background: -ms-linear-gradient(top, #5775ee 0%, #6a85fe 100%); background: linear-gradient(to bottom, #5775ee 0%, #6a85fe 100%); line-height: 65px; color: #fff;}.priczx .pricing-area-4 .price-body-4 ul li:first-child{ padding-top: 20px; }.priczx .pricing-area-4 .price-button-4{ background: #5775ee; background: -moz-linear-gradient(top, #5775ee 0%, #6a85fe 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #5775ee), color-stop(100%, #6a85fe)); background: -webkit-linear-gradient(top, #5775ee 0%, #6a85fe 100%); background: -o-linear-gradient(top, #5775ee 0%, #6a85fe 100%); background: -ms-linear-gradient(top, #5775ee 0%, #6a85fe 100%); background: linear-gradient(to bottom, #5775ee 0%, #6a85fe 100%); padding-top: 30px; padding-bottom: 22px;}.priczx .pricing-area-4 .price-button-4 .button-4{ display: inline-block; padding: 18px 54px; border: 1px solid #fff; font-size: 16px; color: #fff; background: transparent; font-weight: bold; text-transform: capitalize; border-radius: 50px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s;}.priczx .pricing-area-4 .price-button-4 .button-4:hover,.priczx .pricing-area-4 .price-button-4 .button-4:focus{ background: #fff; color: #5774ee;}/*--------------------------------------- End Table-4 section css---------------------------------------*//*--------------------------------------- Responsive css---------------------------------------*//* Medium Layout: 1280px. */@media only screen and (min-width: 992px) and (max-width: 1200px) {}/* Tablet Layout: 768px. */@media only screen and (min-width: 768px) and (max-width: 991px) { .priczx .pricing-area-1, .priczx .pricing-area-2, .priczx .pricing-area-2, .priczx .pricing-area-3, .priczx .pricing-area-4{ margin-bottom: 60px; }}/* Mobile Layout: 320px. */@media only screen and (max-width: 767px) { .priczx .pricing-area-1, .priczx .pricing-area-2, .priczx .pricing-area-2, .priczx .pricing-area-3, .priczx .pricing-area-4{ margin-bottom: 60px; }}
</style>
</head>
<body class="wrapper">
<section class="priczx table-1 section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="table-header text-center">
<h1>Table 1</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="pricing-area-1">
<div class="title-area-1">
<div class="title-1">
<h6>Entry Level</h6>
</div>
<div class="price-1">
<h1>$19</h1>
</div>
</div>
<div class="price-body-1">
<ul>
<li>Unlimited Members</li>
<li>10 GB Ultra Fast Brandwidth</li>
<li>10 Email Accounts</li>
<li>Free Supports</li>
<li>50 GB Data Backup</li>
</ul>
</div>
<div class="price-button-1"><a href="#" class="button-1">select</a></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="pricing-area-1">
<div class="title-area-1">
<div class="p-shape-2"><span>Best</span></div>
<div class="title-1">
<h6>Professional</h6>
</div>
<div class="price-1">
<h1>$19</h1>
</div>
</div>
<div class="price-body-1">
<ul>
<li>Unlimited Members</li>
<li>10 GB Ultra Fast Brandwidth</li>
<li>10 Email Accounts</li>
<li>Free Supports</li>
<li>50 GB Data Backup</li>
</ul>
</div>
<div class="price-button-1"><a href="#" class="button-1">select</a></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="pricing-area-1">
<div class="title-area-1">
<div class="title-1">
<h6>Premium Plus</h6>
</div>
<div class="price-1">
<h1>$19</h1>
</div>
</div>
<div class="price-body-1">
<ul>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0