阐述

网页上发布产品时，一般都有几套价格方案，通常我们将几套方案放在一起，用户可以相互比较决定购买哪个套餐。

最常见的是主机商发布产品价格信息页，本文结合实例给大家分享以纯CSS+HTML实现的价格表。

demo1

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>演示：HTML+CSS实现漂亮的价格表</title>
<meta name="keywords" content="css3,价格表" />
<meta name="description" content="实例演示HTML5、CSS3" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body><div id="main"><h2 class="top_title">HTML+CSS实现漂亮的价格表</h2><p style="text-align:center;padding:30px;font-size:16px"><a href="index.html">DEMO 1</a> &nbsp;&nbsp;  <a href="index2.html">DEMO 2</a></p><div class="demo" id="pricePlans"><ul id="plans"><li class="plan"><ul class="planContainer"><li class="title"><h2>入门型VPS</h2></li><li class="price"><p>￥149/<span>月</span></p></li><li><ul class="options"><li>小型企业、个人首选</li><li>双核至强处理器</li><li>1G DDR3 ECC <span>高速纠错内存</span></li><li>10G + 20G <span>高速企业级硬盘</span></li><li>1M <span>专线带宽</span></li><li>1个 <span>独立公网IP</span></li></ul></li><li class="button"><a href="#">点击购买</a></li></ul></li><li class="plan"><ul class="planContainer"><li class="title"><h2 class="bestPlanTitle">进阶型VPS</h2></li><li class="price"><p class="bestPlanPrice">￥199/月</p></li><li><ul class="options"><li>小型企业、个人首选</li><li>双核至强处理器</li><li>2G DDR3 ECC <span>高速纠错内存</span></li><li>10G + 40G <span>高速企业级硬盘</span></li><li>2M <span>专线带宽</span></li><li>1个 <span>独立公网IP</span></li></ul></li><li class="button"><a class="bestPlanButton" href="#">点击购买</a></li></ul></li><li class="plan"><ul class="planContainer"><li class="title"><h2>尊贵型VPS</h2></li><li class="price"><p>￥349/<span>月</span></p></li><li><ul class="options"><li>中型企业、个人首选</li><li>四核至强处理器</li><li>4G DDR3 ECC <span>高速纠错内存</span></li><li>10G + 60G <span>高速企业级硬盘</span></li><li>2M <span>专线带宽</span></li><li>1个 <span>独立公网IP</span></li></ul></li><li class="button"><a href="#">点击购买</a></li></ul></li><li class="plan"><ul class="planContainer"><li class="title"><h2>至尊型VPS</h2></li><li class="price"><p>￥649/<span>月</span></p></li><li><ul class="options"><li>大型企业、个人首选</li><li>四核至强处理器</li><li>8G DDR3 ECC <span>高速纠错内存</span></li><li>10G + 80G <span>高速企业级硬盘</span></li><li>3M <span>专线带宽</span></li><li>2个 <span>独立公网IP</span></li></ul></li><li class="button"><a href="#">点击购买</a></li></ul></li></ul> </div>
</div></body>
</html>

style.css

html,html a {-webkit-font-smoothing: antialiased;text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}#plans,#plans ul,#plans ul li {margin: 0;padding: 0;list-style: none;
}#pricePlans:after {content: '';display: table;clear: both;
}#pricePlans {zoom: 1;
}#pricePlans {max-width: 69em;margin: 2em auto;
}#pricePlans #plans .plan {background: #fff;float: left;text-align: center;border-radius: 5px;border:1px solid #d3d3d3;-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);box-shadow: 0 1px 3px rgba(0,0,0,0.1);width: 23%;margin: 0 1.33% 20px 0;-webkit-transition: all .25s;-moz-transition: all .25s;-ms-transition: all .25s;-o-transition: all .25s;transition: all .25s;
}#pricePlans #plans .plan:hover {-webkit-transform: scale(1.04);-moz-transform: scale(1.04);-ms-transform: scale(1.04);-o-transform: scale(1.04);transform: scale(1.04);
}.planContainer .title h2 {font-size: 2.125em;font-weight: 300;color: #3e4f6a;margin: 0;padding: .6em 0;
}.planContainer .title h2.bestPlanTitle {background: #3e4f6a;background: -webkit-linear-gradient(top, #475975, #364761);background: -moz-linear-gradient(top, #475975, #364761);background: -o-linear-gradient(top, #475975, #364761);background: -ms-linear-gradient(top, #475975, #364761);background: linear-gradient(top, #475975, #364761);color: #fff;border-radius: 5px 5px 0 0;
}.planContainer .price p {background: #3e4f6a;background: -webkit-linear-gradient(top, #475975, #364761);background: -moz-linear-gradient(top, #475975, #364761);background: -o-linear-gradient(top, #475975, #364761);background: -ms-linear-gradient(top, #475975, #364761);background: linear-gradient(top, #475975, #364761);color: #fff;font-size: 1.2em;font-weight: 700;height: 2.6em;line-height: 2.6em;margin: 0 0 1em;
}.planContainer .price p.bestPlanPrice {background: #f7814d;
}.planContainer .price p span {color: #8394ae;
}.planContainer .options {margin-top: 10em;
}.planContainer .options li {font-weight: 700;color: #364762;line-height: 2.5;
}.planContainer .options li span {font-weight: 400;color: #979797;
}.planContainer .button a {text-transform: uppercase;text-decoration: none;color: #3e4f6a;font-weight: 700;letter-spacing: 3px;line-height: 2.8em;border: 2px solid #3e4f6a;display: inline-block;width: 80%;height: 2.8em;border-radius: 4px;margin: 1.5em 0 1.8em;-webkit-transition: all .25s;-moz-transition: all .25s;-ms-transition: all .25s;-o-transition: all .25s;transition: all .25s;
}.planContainer .button a.bestPlanButton {color: #fff;background: #f7814d;border: 2px solid #f7814d;
}#pricePlans #plans > li:last-child {margin-right: 0;
}.planContainer .button a {}.planContainer .button a:hover {background: #3e4f6a;color: #fff;
}.planContainer .button a.bestPlanButton:hover {background: #ff9c70;border: 2px solid #ff9c70;
}

demo2

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>演示：HTML+CSS实现漂亮的价格表</title>
<meta name="keywords" content="css3,价格表" />
<meta name="description" content="实例演示HTML5、CSS3" />
<link rel="stylesheet" type="text/css" href="style2.css" />
<style type="text/css">
.demo{width:90%; margin:60px auto 10px auto}
</style>
</head>
<body><div id="main"><h2 class="top_title">HTML+CSS实现漂亮的价格表</h2><p style="text-align:center;padding:30px;font-size:16px"><a href="index.html">DEMO 1</a> &nbsp;&nbsp;  <a href="index2.html">DEMO 2</a></p><div class="demo"><!-- LIGHT BLUE SKIN --><div class="pt-container light-blue"><div class="col-md-3 col-sm-6"><div class="pricing-table"><div class="pt-header"><div class="pt-ribbon-wrapper"><div class="pt-ribbon">New</div></div><h3 class="pt-title">入门型</h3><h4 class="pt-price"><span class="pt-currency">￥</span>149<span class="pt-per">/ 月</span></h4><p class="pt-description">小型企业、个人首选</p></div><div class="pt-body hover"><div class="pt-row">双核至强处理器</div><div class="pt-row">1G DDR3 ECC <br/>高速纠错内存</div><div class="pt-row">10G + 20G <br/>高速企业级硬盘</div><div class="pt-row">1M 专线带宽</div><div class="pt-row">1个 独立公网IP</div></div><div class="pt-footer"><button type="button" class="pt-button rounded">点击购买</button></div></div> <!-- end .pricing-table --></div> <!-- end .col-md-3 --><div class="col-md-3 col-sm-6"><div class="pricing-table"><div class="pt-header"><h3 class="pt-title">进阶型</h3><h4 class="pt-price"><span class="pt-currency">￥</span>199<span class="pt-per">/ 月</span></h4><p class="pt-description">小型企业、个人首选</p></div><div class="pt-body hover"><div class="pt-row">双核至强处理器</div><div class="pt-row">2G DDR3 ECC <br/>高速纠错内存</div><div class="pt-row">10G + 40G <br/>高速企业级硬盘</div><div class="pt-row">2M 专线带宽</div><div class="pt-row">1个 独立公网IP</div></div><div class="pt-footer"><button type="button" class="pt-button rounded">点击购买</button></div></div> <!-- end .pricing-table --></div> <!-- end .col-md-3 --><div class="col-md-3 col-sm-6"><div class="pricing-table active"><div class="pt-header"><div class="pt-ribbon-wrapper"><div class="pt-ribbon">Best</div></div><h3 class="pt-title">尊贵型</h3><h4 class="pt-price"><span class="pt-currency">￥</span>349<span class="pt-per">/ 月</span></h4><p class="pt-description">中型企业、个人首选</p></div><div class="pt-body hover"><div class="pt-row">四核至强处理器</div><div class="pt-row">4G DDR3 ECC <br/>高速纠错内存</div><div class="pt-row">10G + 60G <br/>高速企业级硬盘</div><div class="pt-row">2M 专线带宽</div><div class="pt-row">1个 独立公网IP</div></div><div class="pt-footer"><button type="button" class="pt-button">点击购买</button></div></div> <!-- end .pricing-table --></div> <!-- end .col-md-3 --><div class="col-md-3 col-sm-6"><div class="pricing-table"><div class="pt-header"><h3 class="pt-title">至尊型</h3><h4 class="pt-price"><span class="pt-currency">￥</span>649<span class="pt-per">/ 月</span></h4><p class="pt-description">大型企业、个人首选</p></div><div class="pt-body hover"><div class="pt-row">四核至强处理器</div><div class="pt-row">8G DDR3 ECC <br/>高速纠错内存</div><div class="pt-row">10G + 80G <br/>高速企业级硬盘</div><div class="pt-row">2M 专线带宽</div><div class="pt-row">1个 独立公网IP</div></div><div class="pt-footer"><button type="button" class="pt-button">点击购买</button></div></div> <!-- end .pricing-table --></div> <!-- end .col-md-3 --></div></div>
</div></body>
</html>

style2.css

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%
}
body {margin:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display:block
}
audio,canvas,progress,video {display:inline-block;vertical-align:baseline
}
audio:not([controls]) {display:none;height:0
}
[hidden],template {display:none
}
a {background:0 0
}
a:active,a:hover {outline:0
}
abbr[title] {border-bottom:1px dotted
}
b,strong {font-weight:700
}
dfn {font-style:italic
}
h1 {font-size:2em;margin:.67em 0
}
mark {background:#ff0;color:#000
}
small {font-size:80%
}
sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline
}
sup {top:-.5em
}
sub {bottom:-.25em
}
img {border:0
}
svg:not(:root) {overflow:hidden
}
figure {margin:1em 40px
}
hr {-moz-box-sizing:content-box;box-sizing:content-box;height:0
}
pre {overflow:auto
}
code,kbd,pre,samp {font-family:monospace,monospace;font-size:1em
}
button,input,optgroup,select,textarea {color:inherit;font:inherit;margin:0
}
button {overflow:visible
}
button,select {text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit] {-webkit-appearance:button;cursor:pointer
}
button[disabled],html input[disabled] {cursor:default
}
button::-moz-focus-inner,input::-moz-focus-inner {border:0;padding:0
}
input {line-height:normal
}
input[type=checkbox],input[type=radio] {box-sizing:border-box;padding:0
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {height:auto
}
input[type=search] {-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {-webkit-appearance:none
}
fieldset {border:1px solid silver;margin:0 2px;padding:.35em .625em .75em
}
legend {border:0;padding:0
}
textarea {overflow:auto
}
optgroup {font-weight:700
}
table {border-collapse:collapse;border-spacing:0
}
td,th {padding:0
}.row {margin-left:-15px;margin-right:-15px
}
.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12 {position:relative;min-height:1px;padding-left:15px;padding-right:15px
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {float:left
}
.col-xs-12 {width:100%
}
.col-xs-11 {width:91.66666667%
}
.col-xs-10 {width:83.33333333%
}
.col-xs-9 {width:75%
}
.col-xs-8 {width:66.66666667%
}
.col-xs-7 {width:58.33333333%
}
.col-xs-6 {width:50%
}
.col-xs-5 {width:41.66666667%
}
.col-xs-4 {width:33.33333333%
}
.col-xs-3 {width:25%
}
.col-xs-2 {width:16.66666667%
}
.col-xs-1 {width:8.33333333%
}@media (min-width:768px) {.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {float:left
}
.col-sm-12 {width:100%
}
.col-sm-11 {width:91.66666667%
}
.col-sm-10 {width:83.33333333%
}
.col-sm-9 {width:75%
}
.col-sm-8 {width:66.66666667%
}
.col-sm-7 {width:58.33333333%
}
.col-sm-6 {width:50%
}
.col-sm-5 {width:41.66666667%
}
.col-sm-4 {width:33.33333333%
}
.col-sm-3 {width:25%
}
.col-sm-2 {width:16.66666667%
}
.col-sm-1 {width:8.33333333%
}}@media (min-width:992px) {.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {float:left
}
.col-md-12 {width:100%
}
.col-md-11 {width:91.66666667%
}
.col-md-10 {width:83.33333333%
}
.col-md-9 {width:75%
}
.col-md-8 {width:66.66666667%
}
.col-md-7 {width:58.33333333%
}
.col-md-6 {width:50%
}
.col-md-5 {width:41.66666667%
}
.col-md-4 {width:33.33333333%
}
.col-md-3 {width:21.6%
}
.col-md-2 {width:16.66666667%
}
.col-md-1 {width:8.33333333%
}}@media (min-width:1200px) {.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 {float:left
}
.col-lg-12 {width:100%
}
.col-lg-11 {width:91.66666667%
}
.col-lg-10 {width:83.33333333%
}
.col-lg-9 {width:75%
}
.col-lg-8 {width:66.66666667%
}
.col-lg-7 {width:58.33333333%
}
.col-lg-6 {width:50%
}
.col-lg-5 {width:41.66666667%
}
.col-lg-4 {width:33.33333333%
}
.col-lg-3 {width:25%
}
.col-lg-2 {width:16.66666667%
}
.col-lg-1 {width:8.33333333%
}}.row:before,.row:after {content:" ";display:table
}
.row:after {clear:both
}
.pt-container {margin-left:-15px;margin-right:-15px
}
.pt-container:before,.pt-container:after {content:" ";display:table
}
.pt-container:after {clear:both
}
@media (min-width:992px) {.pt-container {margin-bottom:100px;border:1px solid #e7e8e8
}
}.pricing-table {margin-bottom:30px;background-color:#fff;border:1px solid #d0d0d0;line-height:1.5;overflow:hidden;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out
}
@media (min-width:992px) {.pricing-table {margin:0 -15px
}
}.pricing-table.active {z-index:2;border:2px solid #8ab71b;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out
}
@media (min-width:992px) {.pricing-table.active {position:absolute;top:-22px;width:100%
}
}.pricing-table.active .pt-title {background-color:#fbfbfb
}
@media (min-width:992px) {.pricing-table.active .pt-title {padding-top:40px
}
}.pricing-table.active .pt-footer {background-color:transparent
}
@media (min-width:992px) {.pricing-table.active .pt-ribbon-wrapper {width:115px;height:115px
}
.pricing-table.active .pt-ribbon-wrapper .pt-ribbon {top:11px;left:-12px
}
}@media (min-width:992px) {.pricing-table.active:hover {-webkit-transform:translate(0,-5px);-ms-transform:translate(0,-5px);transform:translate(0,-5px)
}
}.pricing-table:hover {border-color:#8ab71b
}
.pricing-table:hover .pt-title {color:#fff;background-color:#8ab71b
}
.pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#8ab71b
}
.pt-header {position:relative;background-color:#fff;text-align:center
}
.pt-header .pt-ribbon-wrapper {position:absolute;top:0;right:0;overflow:hidden;width:80px;height:80px
}
.pt-header .pt-ribbon-wrapper .pt-ribbon {position:relative;height:40px;top:0;left:-32px;width:180px;background-color:#8ab71b;color:#fff;font-size:14px;font-weight:400;text-transform:uppercase;line-height:40px;-webkit-transform:rotate(40deg);-ms-transform:rotate(40deg);transform:rotate(40deg)
}
.pt-header .pt-title {margin:0;padding:20px 0;background-color:#fbfbfb;color:#505050;font-size:18px;text-transform:uppercase;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out
}
.pt-header .pt-price {margin:0;padding:15px 0;font-family:Georgia,sans-serif;color:#505050;font-size:48px
}
.pt-header .pt-price .pt-currency {color:#505050;font-size:24px;font-weight:400
}.pt-header .pt-price .pt-per {position:relative;top:2px;left:8px;color:#909090;font-size:16px;font-weight:400;text-transform:lowercase
}
.pt-header .pt-description {margin:0 0 20px;padding:0 30px;color:#505050;font-weight:700
}
.pt-body {padding:0 30px;background-color:#fff;font-size:16px;color:#505050;text-align:center
}
.pt-body.striped .pt-row:nth-child(2n-1) {background-color:#fbfbfb
}
.pt-body.hover .pt-row {-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out
}
.pt-body.hover .pt-row:hover {background-color:#fbfbfb;color:#505050;font-weight:400
}
.pt-body.striped.hover .pt-row:hover {background-color:#fff
}
.pt-body .pt-row {padding:15px 0;background-color:#fff;border-top:1px dashed #e0e0e0
}
.pt-body .pt-row .pt-row-icon {font-size:12px;margin-right:5px
}
.pt-body .pt-row .pt-row-icon.ok {color:#80a32d
}
.pt-body .pt-row .pt-row-icon.remove {color:#e66946
}
.pt-footer {padding:30px 50px;background-color:transparent
}
.pt-footer .pt-button {background-color:#8ab71b;border:2px solid #8ab71b;color:#fff;text-align:center;font-size:16px;text-decoration:none;padding:10px 0;display:block;min-width:100%;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out
}
.pt-footer .pt-button.rounded {border-radius:5px
}
.pt-footer .pt-button.pill {border-radius:36px
}
.pt-footer .pt-button:hover {color:#88aa2e;text-decoration:none;background-color:transparent;border:2px solid #8ab71b
}
.blue .pricing-table.active {border:2px solid #2e3138
}
.blue .pricing-table:hover {border-color:#2e3138
}
.blue .pricing-table:hover .pt-title {background-color:#2e3138
}
.blue .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#2e3138
}
.blue .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#2e3138
}
.blue .pt-footer .pt-button {background-color:#2e3138;border:2px solid #2e3138
}
.blue .pt-footer .pt-button:hover {background-color:transparent;color:#2e3138
}
.pricing-table.blue.active {border:2px solid #2e3138
}
.pricing-table.blue:hover {border-color:#2e3138
}
.pricing-table.blue:hover .pt-title {background-color:#2e3138
}
.pricing-table.blue:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#2e3138
}
.pricing-table.blue .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#2e3138
}
.pricing-table.blue .pt-footer .pt-button {background-color:#2e3138;border:2px solid #2e3138
}
.pricing-table.blue .pt-footer .pt-button:hover {background-color:transparent;color:#2e3138
}
.pricing-table.blue:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#2e3138
}
.red .pricing-table.active {border:2px solid #ee103f
}
.red .pricing-table:hover {border-color:#ee103f
}
.red .pricing-table:hover .pt-title {background-color:#ee103f
}
.red .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#ee103f
}
.red .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#ee103f
}
.red .pt-footer .pt-button {background-color:#ee103f;border:2px solid #ee103f
}
.red .pt-footer .pt-button:hover {background-color:transparent;color:#ee103f
}
.pricing-table.red.active {border:2px solid #ee103f
}
.pricing-table.red:hover {border-color:#ee103f
}
.pricing-table.red:hover .pt-title {background-color:#ee103f
}
.pricing-table.red:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#ee103f
}
.pricing-table.red .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#ee103f
}
.pricing-table.red .pt-footer .pt-button {background-color:#ee103f;border:2px solid #ee103f
}
.pricing-table.red .pt-footer .pt-button:hover {background-color:transparent;color:#ee103f
}
.pricing-table.red:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#ee103f
}
.orange .pricing-table.active {border:2px solid #ee4e10
}
.orange .pricing-table:hover {border-color:#ee4e10
}
.orange .pricing-table:hover .pt-title {background-color:#ee4e10
}
.orange .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#ee4e10
}
.orange .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#ee4e10
}
.orange .pt-footer .pt-button {background-color:#ee4e10;border:2px solid #ee4e10
}
.orange .pt-footer .pt-button:hover {background-color:transparent;color:#ee4e10
}
.pricing-table.orange.active {border:2px solid #ee4e10
}
.pricing-table.orange:hover {border-color:#ee4e10
}
.pricing-table.orange:hover .pt-title {background-color:#ee4e10
}
.pricing-table.orange:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#ee4e10
}
.pricing-table.orange .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#ee4e10
}
.pricing-table.orange .pt-footer .pt-button {background-color:#ee4e10;border:2px solid #ee4e10
}
.pricing-table.orange .pt-footer .pt-button:hover {background-color:transparent;color:#ee4e10
}
.pricing-table.orange:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#ee4e10
}
.light-blue .pricing-table.active {border:2px solid #2aa1d3
}
.light-blue .pricing-table:hover {border-color:#2aa1d3
}
.light-blue .pricing-table:hover .pt-title {background-color:#2aa1d3
}
.light-blue .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#2aa1d3
}
.light-blue .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#2aa1d3
}
.light-blue .pt-footer .pt-button {background-color:#2aa1d3;border:2px solid #2aa1d3
}
.light-blue .pt-footer .pt-button:hover {background-color:transparent;color:#2aa1d3
}
.pricing-table.light-blue.active {border:2px solid #2aa1d3
}
.pricing-table.light-blue:hover {border-color:#2aa1d3
}
.pricing-table.light-blue:hover .pt-title {background-color:#2aa1d3
}
.pricing-table.light-blue:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#2aa1d3
}
.pricing-table.light-blue .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#2aa1d3
}
.pricing-table.light-blue .pt-footer .pt-button {background-color:#2aa1d3;border:2px solid #2aa1d3
}
.pricing-table.light-blue .pt-footer .pt-button:hover {background-color:transparent;color:#2aa1d3
}
.pricing-table.light-blue:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#2aa1d3
}
.yellow .pricing-table.active {border:2px solid #f0b017
}
.yellow .pricing-table:hover {border-color:#f0b017
}
.yellow .pricing-table:hover .pt-title {background-color:#f0b017
}
.yellow .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#f0b017
}
.yellow .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#f0b017
}
.yellow .pt-footer .pt-button {background-color:#f0b017;border:2px solid #f0b017
}
.yellow .pt-footer .pt-button:hover {background-color:transparent;color:#f0b017
}
.pricing-table.yellow.active {border:2px solid #f0b017
}
.pricing-table.yellow:hover {border-color:#f0b017
}
.pricing-table.yellow:hover .pt-title {background-color:#f0b017
}
.pricing-table.yellow:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#f0b017
}
.pricing-table.yellow .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#f0b017
}
.pricing-table.yellow .pt-footer .pt-button {background-color:#f0b017;border:2px solid #f0b017
}
.pricing-table.yellow .pt-footer .pt-button:hover {background-color:transparent;color:#f0b017
}
.pricing-table.yellow:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#f0b017
}
.purple .pricing-table.active {border:2px solid #a84db2
}
.purple .pricing-table:hover {border-color:#a84db2
}
.purple .pricing-table:hover .pt-title {background-color:#a84db2
}
.purple .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#a84db2
}
.purple .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#a84db2
}
.purple .pt-footer .pt-button {background-color:#a84db2;border:2px solid #a84db2
}
.purple .pt-footer .pt-button:hover {background-color:transparent;color:#a84db2
}
.pricing-table.purple.active {border:2px solid #a84db2
}
.pricing-table.purple:hover {border-color:#a84db2
}
.pricing-table.purple:hover .pt-title {background-color:#a84db2
}
.pricing-table.purple:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#a84db2
}
.pricing-table.purple .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#a84db2
}
.pricing-table.purple .pt-footer .pt-button {background-color:#a84db2;border:2px solid #a84db2
}
.pricing-table.purple .pt-footer .pt-button:hover {background-color:transparent;color:#a84db2
}
.pricing-table.purple:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#a84db2
}
.brown .pricing-table.active {border:2px solid #8d512d
}
.brown .pricing-table:hover {border-color:#8d512d
}
.brown .pricing-table:hover .pt-title {background-color:#8d512d
}
.brown .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#8d512d
}
.brown .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#8d512d
}
.brown .pt-footer .pt-button {background-color:#8d512d;border:2px solid #8d512d
}
.brown .pt-footer .pt-button:hover {background-color:transparent;color:#8d512d
}
.pricing-table.brown.active {border:2px solid #8d512d
}
.pricing-table.brown:hover {border-color:#8d512d
}
.pricing-table.brown:hover .pt-title {background-color:#8d512d
}
.pricing-table.brown:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#8d512d
}
.pricing-table.brown .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#8d512d
}
.pricing-table.brown .pt-footer .pt-button {background-color:#8d512d;border:2px solid #8d512d
}
.pricing-table.brown .pt-footer .pt-button:hover {background-color:transparent;color:#8d512d
}
.pricing-table.brown:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#8d512d
}
.dark .pricing-table.active {border:2px solid #505050
}
.dark .pricing-table:hover {border-color:#505050
}
.dark .pricing-table:hover .pt-title {background-color:#505050
}
.dark .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#505050
}
.dark .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#505050
}
.dark .pt-footer .pt-button {background-color:#505050;border:2px solid #505050
}
.dark .pt-footer .pt-button:hover {background-color:transparent;color:#505050
}
.pricing-table.dark.active {border:2px solid #505050
}
.pricing-table.dark:hover {border-color:#505050
}
.pricing-table.dark:hover .pt-title {background-color:#505050
}
.pricing-table.dark:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#505050
}
.pricing-table.dark .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#505050
}
.pricing-table.dark .pt-footer .pt-button {background-color:#505050;border:2px solid #505050
}
.pricing-table.dark .pt-footer .pt-button:hover {background-color:transparent;color:#505050
}
.pricing-table.dark:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#505050
}
.light-turquoise .pricing-table.active {border:2px solid #afeeee
}
.light-turquoise .pricing-table:hover {border-color:#afeeee
}
.light-turquoise .pricing-table:hover .pt-title {background-color:#afeeee
}
.light-turquoise .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#afeeee
}
.light-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#afeeee
}
.light-turquoise .pt-footer .pt-button {background-color:#afeeee;border:2px solid #afeeee
}
.light-turquoise .pt-footer .pt-button:hover {background-color:transparent;color:#afeeee
}
.pricing-table.light-turquoise.active {border:2px solid #afeeee
}
.pricing-table.light-turquoise:hover {border-color:#afeeee
}
.pricing-table.light-turquoise:hover .pt-title {background-color:#afeeee
}
.pricing-table.light-turquoise:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#afeeee
}
.pricing-table.light-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#afeeee
}
.pricing-table.light-turquoise .pt-footer .pt-button {background-color:#afeeee;border:2px solid #afeeee
}
.pricing-table.light-turquoise .pt-footer .pt-button:hover {background-color:transparent;color:#afeeee
}
.pricing-table.light-turquoise:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#afeeee
}
.medium-turquoise .pricing-table.active {border:2px solid #48d1cc
}
.medium-turquoise .pricing-table:hover {border-color:#48d1cc
}
.medium-turquoise .pricing-table:hover .pt-title {background-color:#48d1cc
}
.medium-turquoise .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#48d1cc
}
.medium-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#48d1cc
}
.medium-turquoise .pt-footer .pt-button {background-color:#48d1cc;border:2px solid #48d1cc
}
.medium-turquoise .pt-footer .pt-button:hover {background-color:transparent;color:#48d1cc
}
.pricing-table.medium-turquoise.active {border:2px solid #48d1cc
}
.pricing-table.medium-turquoise:hover {border-color:#48d1cc
}
.pricing-table.medium-turquoise:hover .pt-title {background-color:#48d1cc
}
.pricing-table.medium-turquoise:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#48d1cc
}
.pricing-table.medium-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#48d1cc
}
.pricing-table.medium-turquoise .pt-footer .pt-button {background-color:#48d1cc;border:2px solid #48d1cc
}
.pricing-table.medium-turquoise .pt-footer .pt-button:hover {background-color:transparent;color:#48d1cc
}
.pricing-table.medium-turquoise:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#48d1cc
}
.dark-turquoise .pricing-table.active {border:2px solid #00ced1
}
.dark-turquoise .pricing-table:hover {border-color:#00ced1
}
.dark-turquoise .pricing-table:hover .pt-title {background-color:#00ced1
}
.dark-turquoise .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#00ced1
}
.dark-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#00ced1
}
.dark-turquoise .pt-footer .pt-button {background-color:#00ced1;border:2px solid #00ced1
}
.dark-turquoise .pt-footer .pt-button:hover {background-color:transparent;color:#00ced1
}
.pricing-table.dark-turquoise.active {border:2px solid #00ced1
}
.pricing-table.dark-turquoise:hover {border-color:#00ced1
}
.pricing-table.dark-turquoise:hover .pt-title {background-color:#00ced1
}
.pricing-table.dark-turquoise:hover .pt-ribbon-wrapper .pt-ribbon {background:#fff;color:#00ced1
}
.pricing-table.dark-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#00ced1
}
.pricing-table.dark-turquoise .pt-footer .pt-button {background-color:#00ced1;border:2px solid #00ced1
}
.pricing-table.dark-turquoise .pt-footer .pt-button:hover {background-color:transparent;color:#00ced1
}
.pricing-table.dark-turquoise:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {background-color:#fff;color:#00ced1
}

纯CSS3制作漂亮的价格表相关推荐

纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
html火影忍者网页设计作品,纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例...
本文实例讲述了纯css3制作的火影忍者中写轮眼开眼至轮回眼及进化过程实现方法.分享给大家供大家参考.具体分析如下: 今天是火影忍者(漫画)宣告完结的日子.看过火影的朋友都知道,写轮眼是什么,这里就不多 ...
纯CSS3制作逼真的iphone 6手机模型
注意这里我只是转载过来的(来自 jQuery之家的分享),然后加以整理.嘻嘻~ 纯CSS3制作逼真的iphone 6手机模型 iphone.html <div class="ipho ...
css3 动画翅膀震动,纯css3制作煽动翅膀的蝴蝶
纯css3制作煽动翅膀的蝴蝶,先看效果怎么样,效果还不错吧上代码: html cssbody{ background: url("./images/bg.jpg&q ...
css 圆形背景icon_纯CSS3制作精美的圆形扁平风格图标
这是一组使用纯CSS3制作的精美的扁平风格的圆形图标.这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标. 制作方法 HTML结构图标的 ...
html漂亮的单选框,纯css3实现漂亮的单选按钮radio
单选按钮radio是表单常见的元素,但是默认的单选按钮radio样式呆板不好看,因此通常设计人员会自己设计一个单选按钮radio,本文介绍用纯css3实现漂亮的单选按钮radio. 纯css3实现漂亮 ...
html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...

纯CSS3制作漂亮的价格表

阅读目录

阐述

demo1

style.css

demo2

style2.css

纯CSS3制作漂亮的价格表相关推荐

最新文章

热门文章