兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)皆为提供免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需充值兔币购买会员组方可下载),用户仅需手动前往【申请下载权限】申请用户组下载权限即可,如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

CSS3扁平化价格表样式代码

[复制链接]
tuyuanma 发表于 2017-1-20 18:46:39 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


<!DOCTYPE html>
/ _0 e, ^, m4 A2 o  k<html lang="zh">; q! u0 D, {/ q  Q' P
<head>
: O7 T( l9 w! U3 \6 h/ W5 V         <meta charset="UTF-8">+ w' P! i" y5 [, Y; W: U6 K
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">. w. \9 W3 Z& {3 `
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
% M$ E: D3 n1 K- q7 B5 p0 t! Q0 X) [% ~         <title>CSS3扁平化价格表样式代码</title>
1 A" j  r  W2 {) a/ R3 o% G         <meta name="keywords" content="CSS3,扁平化,价格表,样式代码" />% X0 P4 F7 c4 ?7 A6 j
         <meta name="description" content="CSS3扁平化价格表样式代码。" />
3 k& l( T( P' k2 q         <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />7 w7 `6 ]8 [8 v; Q
         <link rel="stylesheet" type="text/css" href="css/demo.css">
6 K5 ?9 P8 F) y( L         <link rel="stylesheet" href="css/font-awesome.min.css">
) M. ~* `+ t; _& ] $ P) `( T1 N. l8 l; b
         <style type="text/css">
1 `& _1 K' J7 t$ Q4 |6 Q# \% T& u         .pricingTable{
- y0 w8 o: w2 O, x             text-align: center;
3 h, M% a- e+ t3 @$ w9 z         }9 x* n$ [$ Z! G6 Q
         .pricingTable .pricingTable-header{
" v# P+ R+ p/ w; U0 ~& Y             padding: 30px 0;6 ?4 c* t/ D' q% F
             background: #4d4d4d;/ {. z4 y! H) Z1 X( ~8 g2 j$ i( I
             position: relative;
" c* w$ b& @% r             transition: all 0.3s ease 0s;
* x2 J5 n7 A1 a; ?  X         }
5 r1 H2 k& b1 v5 r8 f1 [; S         .pricingTable:hover .pricingTable-header{# g3 x( I  ^4 o' R
             background: #09b2c6;
$ @; Q$ \: H! C9 A* U3 r$ P4 f         }/ a, Y# k5 I, |9 \' K
         .pricingTable .pricingTable-header:before,) }3 d. c* P: Y8 k
         .pricingTable .pricingTable-header:after{
" P" e) W* H: H6 F; j3 v             content: "";% [) O+ R8 m# F$ Q" _) ?
             width: 16px;) j& N. S( g; U) ?6 J$ U& n
             height: 16px;6 M  S) n' O  q7 L) f; l
             border-radius: 50%;3 s3 p- v' S& f  i6 h$ @* Z
             border: 1px solid #d9d9d8;
$ O( a, i* t; D# w8 \6 `             position: absolute;
4 |6 b' x% q4 A             bottom: 12px;8 A6 `  @4 b3 M' S0 s' f$ K
         }; |& c: w; ^5 b3 l
         .pricingTable .pricingTable-header:before{
4 J' l( ~6 T7 s+ h             left: 40px;
1 j( F/ O9 C: G* C( `1 Q9 z         }" s& C. W& r$ I
         .pricingTable .pricingTable-header:after{
& g8 ^7 Q" n6 a3 ?1 n4 p             right: 40px;; M" f* r: d: [- r. Z3 y
         }
8 ]8 I& m3 ~% r* v9 l5 P         .pricingTable .heading{
, a# g5 [$ u7 {3 `1 F             font-size: 20px;, S3 F+ p& F' w& J) ]' T
             color: #fff;
' r+ ^9 I: N) i4 P             text-transform: uppercase;
- i5 R8 M" c8 s9 w3 W9 u! H# ^5 i             letter-spacing: 2px;
! d/ y3 l3 U3 f8 f, m4 G  ~             margin-top: 0;0 j) ]3 i- y4 e& K! B
         }: X: E2 ?( T% w, P: z3 U7 X
         .pricingTable .price-value{/ k2 w- s( L4 Z3 q( T
             display: inline-block;
$ T( ~$ f6 }* L1 W5 ?0 b             position: relative;: c/ l+ O3 i" D& r+ K
             font-size: 55px;
+ |# `4 h' }  a. _  T8 \             font-weight: bold;
8 n/ |# f9 e0 S4 h4 w# @1 @  ?             color: #09b1c5;
+ W! {! o0 [3 S+ @. [             transition: all 0.3s ease 0s;
5 n9 `8 Q3 U( z  O, T         }
, {' Z5 w  V* l8 S         .pricingTable:hover .price-value{" I0 D; K( ^: L0 d
             color: #fff;) i2 U5 C. u9 I/ h9 U
         }
$ J* ~2 C: _$ e5 o& ]         .pricingTable .currency{
2 j8 f: N) a' d# o7 }6 N             font-size: 30px;
/ p: l7 p# |/ ~) w% u; c/ b- [             font-weight: bold;
' H( [5 S2 ^& z0 y8 g0 i' Z- U             position: absolute;# N0 x& E, w- G6 @; K% M7 d1 ~( g
             top: 6px;0 N7 x" }! T, L, H% |2 u9 r
             left: -19px;. }, X# a- J3 d
         }
' V( A% G' |1 q% P8 v" u         .pricingTable .month{* O& P7 n& ^6 N: V/ ~: ^$ G& R
             font-size: 16px;2 E  V7 ]8 u7 j" p3 g& ^. k
             color: #fff;+ S  j8 j3 k0 s5 E, z. t3 t; b
             position: absolute;
+ E* B& x: r0 a1 t5 G  `3 N             bottom: 15px;
! O- N/ ]; _. d- s- M9 M; r0 d             right: -30px;
2 z/ l# h) f$ S- L. _1 }2 [! Y             text-transform: uppercase;
& O5 h& _: A& w3 |5 p; ]7 ^+ x         }  c8 l( `4 F- G! J! O/ W
         .pricingTable .pricing-content{* Y3 P9 l& S' p, G" l( j, D) l: {6 b
             padding-top: 50px;( }- w0 V8 C1 f4 a% r( M
             background: #fff;6 k) m" V& r7 r* H) N- V, T% F
             position: relative;- Z! V# y3 \2 Z
         }4 r/ G& x2 Q$ Q$ [2 W* n
         .pricingTable .pricing-content:before,
8 t" w% X# _& @  l         .pricingTable .pricing-content:after{* X- T6 O0 b) p, V* G/ j( k. }, M
             content: "";: J8 ]5 I# [- v5 R) y  u
             width: 16px;
- W- V0 q* }2 b             height: 16px;
, r4 P5 z% U) Z) h  ?- P: _             border-radius: 50%;
# ?, l3 |, g) ]             border: 1px solid #7c7c7c;# x6 d5 v7 G! o- Z, v$ o0 A
             position: absolute;% w6 F* C4 }! D
             top: 12px;
" k3 I3 t* |- T* [/ c- L# h& w         }
: A0 \( x# v, q  j+ C         .pricingTable .pricing-content:before{
, z. D- X, r8 B7 z0 T1 Z             left: 40px;
* d; N# z0 S$ }5 q+ Q; w: `# J8 `         }5 e+ K7 t* V  D; f
         .pricingTable .pricing-content:after{. o& F6 O; d1 h. `7 e
             right: 40px;
8 W& A5 M' O& N4 Z, y1 t  W         }. k; x+ T% y6 u. a/ Q" b
         .pricingTable .pricing-content ul{
0 x* Q) z9 A. h" a3 q4 }+ ~) x0 P             padding: 0 20px;8 z/ T4 n" W4 \9 B1 o  U! C- W' G+ |# i
             margin: 0;) @% ?  s$ R% m) N+ M' o( t5 x  G% x
             list-style: none;; D$ ~0 i; X2 C2 w+ ]* Y9 W. q
         }4 b6 i4 L7 D: p8 H2 }
         .pricingTable .pricing-content ul:before,
  \- ]9 f& m6 X$ F: G& ^         .pricingTable .pricing-content ul:after{; O2 n5 b; z1 S* r; I; [
             content: "";
. w/ R% M" X! J8 n4 d  |& k             width: 8px;
% F( }) e% C% x1 W& O! i/ g             height: 46px;3 A5 `% S$ y, O" T  n( _' @
             border-radius: 3px;6 W! f' v0 P2 g+ J% ]
             background: linear-gradient(to bottom,#818282 50%,#727373 50%);
1 p- B" v) ~# E             position: absolute;
$ }2 p8 l$ Z( I0 r% J  A1 N             top: -22px;
0 ~4 D8 h& L/ E0 G# Z- [             z-index: 1;
$ o2 _( ~$ y1 s! |3 S             box-shadow: 0 0 5px #707070;
: ~5 `3 ~* z) K) b             transition: all 0.3s ease 0s;
0 B" K7 m2 b4 r( Q" a5 r( O         }6 n# ]- z" q' |* v# y0 m
         .pricingTable:hover .pricing-content ul:before,0 W& i$ D5 r' T& K* E+ \3 P. S
         .pricingTable:hover .pricing-content ul:after{( [8 F2 I* [: o) t& M* M; C& x
             background: linear-gradient(to bottom, #40c4db 50%, #34bacc 50%);
, Y# ?& }' `. U+ t0 I. N/ i; o! g         }4 v5 p5 I+ Z. E
         .pricingTable .pricing-content ul:before{7 C% X: c5 H5 [
             left: 44px;/ H* M% H0 J! O9 r
         }& X, Z& h! @1 V2 |% \, \0 e) Y/ c+ a
         .pricingTable .pricing-content ul:after{
( ~* S5 v) \$ N$ ^, }# S# i2 d             right: 44px;
" b  C. |' g* ~+ S- L! k. h         }3 ?7 J  E. t6 x
         .pricingTable .pricing-content ul li{! ~, F* l% s, p9 s! B& R
             font-size: 15px;
$ U! A! f8 \5 W: i( x             font-weight: bold;
  a( O' d3 A, |( j  B: A             color: #777473;
1 Y% i) F3 O, M; h. c( A             padding: 10px 0;
9 U- M8 `1 H$ ?, n2 o. f$ i) Z             border-bottom: 1px solid #d9d9d8;
# b% J# ~) k6 i) y; k% F         }
. D# u3 h) i1 y7 d0 e         .pricingTable .pricing-content ul li:last-child{. }+ _/ D+ e+ ]7 L6 c
             border-bottom: none;
# e# b* K9 i% _7 j' t         }! c  |% ?) B& x! e0 J0 v" G2 r
         .pricingTable .read{
0 {8 D' b. g% P8 L2 s             display: inline-block;
3 |' F, k1 w6 G/ _- ^             font-size: 16px;/ E- E% t5 P. v; r6 r( B8 U2 X
             color: #fff;
- j" z2 f; ]' W( F3 }             text-transform: uppercase;
( x) A- E2 L& B' N, Q# \6 i: u             background: #d9d9d8;. `! {9 x  m% ^* @7 Y
             padding: 8px 25px;
0 Z6 R2 A: x, V  ^. t6 ?/ @             margin: 30px 0;# g+ n4 w$ {: Z( p# q* X
             transition: all 0.3s ease 0s;& d2 Z9 V0 W  n- U+ j
         }
  F7 A% m' j" {. @( _: E$ U         .pricingTable .read:hover{
- |3 S1 S  q, g% V             text-decoration: none;- O0 T. K4 [* j9 i
         }
1 P) p5 |" _: S9 N1 O' t" r         .pricingTable:hover .read{+ w7 m# Z& [( E# a
             background: #09b1c5;# }5 Q. G3 s  f) @
         }1 b7 f; n& d4 i/ K) h
         @media screen and (max-width: 990px){& Y% n6 D4 F7 C  g5 q8 g
             .pricingTable{ margin-bottom: 25px; }0 o- i. n" o" x
         }: X3 S5 J" T1 E' x! V, e
         </style>
' E1 G# |1 \" d' R3 X% |: |; i         <!--[if IE]>& z: @2 z: L0 N; a* ^$ l
                   <script src="js/html5shiv.min.js"></script>) v5 y) w0 d/ a  _( P2 L6 K
         <![endif]-->8 c" k; m% Z' }" t% a
</head>
7 A/ `8 u6 t( w<body>% T4 ^) t) Q8 k
        0 L- g1 c& E3 R9 v
         <div class="demo" style="background:#c0bfbf;padding: 1em 0;">4 x" J, ]: q! H$ ^) ^
                   <div class="container">
3 U( R4 H; e& l5 R: t9 ^* H+ x                            <div class="row">) X! m+ Z" d% X6 j: N
                                     <div class="col-md-3 col-sm-6">: k& u$ c5 R6 S; b) A5 Z+ |3 B$ }, s
                                               <div class="pricingTable">
  |5 F1 j( `; `6 @9 [- z1 @9 ]3 g                                                        <div class="pricingTable-header">4 k+ y! `+ A8 \; ^0 S" ]; x# g
                                                                 <h3 class="heading">标准型</h3>8 H2 j/ Z2 i8 c0 ?
                                                                 <span class="price-value">% f; n6 ?3 ?4 C, C4 j, b' N
                                                                           <span class="currency">¥</span> 10$ V6 z) \2 {2 C$ B- }' \8 R
                                                                           <span class="month">/月</span>' O1 R6 a4 p' j$ M" _& k
                                                                 </span>
$ t, H' z1 J' b4 v) \                                                        </div>
6 D/ h% f7 ]0 c; S7 X6 S1 s                                                        <div class="pricing-content">
- X. S8 K: ~( a; i" N$ `. g                                                                 <ul>( _/ F( I  l( J1 o9 B1 H. O
                                                                           <li>50GB 硬盘空间</li>
- D  X9 ?7 Y! s                                                                           <li>50 邮箱账号</li>8 w: {7 [6 k! {/ \1 x/ h
                                                                           <li>50GB 月流量</li>7 s! ^, y- c2 v* ]& C
                                                                           <li>10 二级域名</li>
" w( |8 K' |. C9 |- l- ?                                                                           <li>15 顶级域名</li>2 T# i: }3 S/ n, Y2 ^) X
                                                                 </ul>; d1 @" ?; r! l: H
                                                                 <a href="#" class="read">立即购买</a>: s, ^& A6 k. q# }( N$ s2 `
                                                        </div>
; S- r$ u. G2 N9 K2 x& `$ B                                               </div>5 Y3 O3 V0 h- Y2 A9 m* Z
                                     </div>$ Y* ]1 V5 o" `) ?

& T" h$ t% f! u0 O                                     <div class="col-md-3 col-sm-6">
2 s* X4 Y# C- W* K' O% B2 h                                               <div class="pricingTable">
( o! R: S) v) K1 U5 n                                                        <div class="pricingTable-header">3 a2 [' z3 t1 L: q8 @% g
                                                                 <h3 class="heading">商务型</h3>
7 V# k# T3 |/ c! i2 |                                                                 <span class="price-value">
, L) K9 ?  r* h" k# d( ^/ D0 i  t                                                                           <span class="currency">¥</span> 20
: l, |5 v/ @+ R2 T0 t                                                                           <span class="month">/月</span>
6 A( e, ^1 t# @3 _  u. |4 d1 Z' O/ e                                                                 </span>5 J, s2 `5 b& Y$ j2 N
                                                        </div>: A) {* P1 G: y. E. W
                                                        <div class="pricing-content">
. j+ k- V! |( ^0 J5 b# r                                                                 <ul>+ E) _% O  i3 z4 d6 k9 K
                                                                           <li>60GB 硬盘空间</li>
+ l8 W2 O; j0 i/ T                                                                           <li>60 邮箱账号</li>1 y, K: J: P% I. A
                                                                           <li>60GB 月流量</li>  A1 @$ B5 I/ j# c+ c# q- F
                                                                           <li>15 二级域名</li>& r7 ]$ i) Y- g& }# L9 i
                                                                           <li>20 顶级域名</li>
# T4 \) I3 h# x8 Z                                                                 </ul>2 o! G% R2 n$ A8 q+ u" o
                                                                 <a href="#" class="read">立即购买</a>+ c0 i5 M7 [& j; o0 H& c8 n) Z+ P
                                                        </div>
  o# n$ T) `. A" h7 j" p# e                                               </div># @7 @& C* G  \. G5 G( S
                                     </div>
% q) _' N8 a8 @4 q( C0 d7 T* |  u ) J/ [+ S: h& w5 _
                                     <div class="col-md-3 col-sm-6">$ a! S# I0 `: R$ t$ v
                                               <div class="pricingTable">& L+ d! T7 n' Y. K1 X
                                                        <div class="pricingTable-header">
$ Y+ X# o1 h" p- H# g                                                                 <h3 class="heading">旗舰型</h3>5 z5 M$ d: y& X' |1 B* z4 H
                                                                 <span class="price-value">
9 c+ a# E7 E0 f; z. N                                                                           <span class="currency">¥</span> 30
1 L% b: i* ?! @6 h2 K: b6 a6 f                                                                           <span class="month">/月</span>. P9 A/ l+ }0 G
                                                                 </span>! a) v& O9 F1 |) ?0 R! ]
                                                        </div>; J9 ?1 B& ?8 _" L% D  q
                                                        <div class="pricing-content">
  j; j! |4 k# G. [% a( P* X                                                                 <ul>
8 {7 b) m! q+ b                                                                           <li>70GB 硬盘空间</li>
/ L7 F" [8 t. K6 U6 `; R                                                                           <li>70 邮箱账号</li>
: d& ~0 K: [3 K6 |7 z' u+ J& D% b                                                                           <li>70GB 月流量</li>/ \. m& o2 g' Y% c- ?2 B
                                                                           <li>20 二级域名</li>
! w2 B3 ^3 c. |; d  Y+ j                                                                           <li>25 顶级域名</li>
) t' Q+ h; O9 t' d1 c                                                                 </ul>! g* x  g# K+ s( P
                                                                 <a href="#" class="read">立即购买</a>
  d! q9 r5 M% r% Q                                                        </div>
  w: S4 `3 B  e. y8 ]' Y6 v& q                                               </div>
: ^  w3 D- K* X5 P! l; X4 c                                     </div>
8 {& h& ~3 c: `9 M
2 w* _  ^. [3 V! v) L                                     <div class="col-md-3 col-sm-6">
. e, `7 M/ w+ r! k% M                                               <div class="pricingTable">
$ d7 L6 Y8 D+ x) m                                                        <div class="pricingTable-header">2 y9 |+ o; z% [  R0 [) f
                                                                 <h3 class="heading">至尊型</h3>
6 H8 o2 r, w# Q5 M4 {0 A                                                                 <span class="price-value">
: `$ F+ \! o5 P" q  [5 ?# k8 o                                                                           <span class="currency">¥</span> 40
. N& Z6 n" c! |' N                                                                           <span class="month">/月</span>
2 h, g7 q* B: `) g                                                                 </span>  ?- S' L) P+ g0 q. \
                                                        </div>) @5 m* O/ F  e2 b7 G
                                                        <div class="pricing-content">
3 N8 d, @( t" m. A$ D7 K) H                                                                 <ul>* d  Y3 g; R" M! O9 q- k
                                                                           <li>80GB 硬盘空间</li># o7 \2 {' {: {5 ^3 r5 Y* b
                                                                           <li>80 邮箱账号</li>8 B; F; a! }; k3 b% V2 ]: w
                                                                           <li>80GB 月流量</li>
+ ~3 U9 Y7 l# h, r+ y" s                                                                           <li>25 二级域名</li>/ K4 {6 t3 J' M0 J( D% `
                                                                           <li>30 顶级域名</li>* @* i' ]2 r  ?) \- _" o8 W$ u7 K- U
                                                                 </ul>
% T- p& o8 J9 Q# I* w5 b% Q                                                                 <a href="#" class="read">立即购买</a>1 m8 W/ H, z# E
                                                        </div>) ?/ I6 H6 c. z  P
                                               </div>
7 b+ P/ q: u0 t' b( f5 {- J                                     </div>
) t3 S; G/ Z! Z  ~8 H9 I1 \                            </div>" Z9 Q- ?1 [# d2 u( r
                   </div>. p, `/ s# v( i8 C' R' V4 n- u' |6 y
         </div>
/ M) u) H/ T6 |* x+ t+ _        
% R# W# N7 f) ]- A6 L7 A</body>
2 x% i) G  |+ G2 H$ C</html>
& _6 E0 I. T5 _; @* i' I% b( C
" S# j; {8 X; n

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2019-6-19 17:20
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表