以下是 纯CSS3实现漂亮的价格表样式代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>纯CSS3实现漂亮的价格表样式代码</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
.demo{width:860px; margin:60px auto 10px auto}
</style>
</head>
<body>
<div id="main">
<p style="text-align:center;padding:30px;font-size:16px"><a href="index.html">DEMO 1</a> <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>
HTML代码(index2.html):
<!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>演示2</title>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
.demo{width:90%; margin:60px auto 10px auto}
</style>
</head>
<body>
<div id="main">
<p style="text-align:center;padding:30px;font-size:16px"><a href="index.html">DEMO 1</a> <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>
CSS代码(main.css):
@charset "utf-8";/* CSS Document */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
a{color:#007bc4/*#424242*/
;text-decoration:none;}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
html{background:url(../images/bg.png)}
body{height:100%;font:12px/18px "Microsoft Yahei",Tahoma,Helvetica,Arial,Verdana,"\5b8b\4f53",sans-serif;color:#51555C;background:url(../images/body_bg.gif) repeat-x}
img{border:none}
#header{width:980px;height:92px;margin:0 auto;position:relative;}
#logo{width:240px;height:90px;background:url(../images/logo_demo.gif) no-repeat}
#logo h1{text-indent:-999em}
#logo h1 a{display:block;width:240px;height:90px}
#main{width:980px;min-height:600px;margin:30px auto 0 auto;border:1px solid #d3d3d3;background:#fff;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
h2.top_title{margin:4px 20px;padding-top:15px;padding-left:20px;padding-bottom:10px;border-bottom:1px solid #d3d3d3;font-size:18px;color:#a84c10;background:url(../images/arrL.gif) no-repeat 2px 14px}
#footer{height:60px;}
#footer p{padding:10px 2px;line-height:24px;text-align:center}
#footer p a:hover{color:#51555C}
#stat{display:none}
.google_ad{width:728px;height:90px;margin:50px auto}
.ad_76090,.ad_demo{width:760px;height:90px;margin:40px auto}
.demo_topad{position:absolute;top:15px;right:0px;width:470px;height:60px;}
@media screen and (min-width:320px) and (max-width:480px){html{-webkit-text-size-adjust:none;}
#header{width:100%}
#main{width:100%;margin:10px auto;-moz-border-radius:0px;-khtml-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
.demo_topad{display:none}
.google_ad{width:100%;margin:40px auto;text-align:center}
.ad_76090,.ad_demo{width:100%;height:auto;margin:40px auto;text-align:center}
.demo{width:98%;margin:10px auto}
}
CSS代码(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;}
分享到QQ
分享到微博
微信扫一扫
