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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

CSS3扁平化价格表样式代码

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

DZ站长建站交流群:493651246

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


<!DOCTYPE html>
- \% c: S; [8 S4 z1 D. t<html lang="zh">3 A, ?  L/ n3 v' ^) u
<head>
! ?+ [8 A* h3 n( Q         <meta charset="UTF-8">
$ {+ ^1 `# q9 {- a, v, @1 \" @         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">* [2 _% w# e) U& L
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
( ]$ ~, y6 J2 |$ t0 b* d6 g* b' B& e         <title>CSS3扁平化价格表样式代码</title>
) ]. `$ L# [4 k, J         <meta name="keywords" content="CSS3,扁平化,价格表,样式代码" />
  O- u3 C0 R" ^9 ?) ?         <meta name="description" content="CSS3扁平化价格表样式代码。" />/ ~" ^* i. L2 R" ]( g5 T
         <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
) I8 ^+ F% T9 U8 r1 w& Y         <link rel="stylesheet" type="text/css" href="css/demo.css">7 b5 n) Q5 j% k
         <link rel="stylesheet" href="css/font-awesome.min.css">3 e/ y+ R' \) s, [; p$ |4 X8 \9 }

& v& _* U! d5 s' a& p, Y4 P3 x         <style type="text/css">
) Z4 s6 ^8 d0 @' I         .pricingTable{
9 n% F0 \! n  e             text-align: center;
( Q! r6 P3 g9 n1 g         }; V7 M8 w0 P/ P
         .pricingTable .pricingTable-header{
$ f5 ?! f4 w# M# K             padding: 30px 0;/ p3 o9 z  B3 r
             background: #4d4d4d;$ {( u/ F8 _' f2 n% Z3 A& }" i
             position: relative;
4 A, V6 p7 |7 ]' Y# X             transition: all 0.3s ease 0s;
4 V, Y, O$ W( ?         }+ B  s% i" H2 y! Q1 i/ [) L, t
         .pricingTable:hover .pricingTable-header{* R* V. Q" F' X( [0 }# Z
             background: #09b2c6;
' ~4 t! U: e( O9 t  E. K         }( L3 k5 \! }  s6 x' A
         .pricingTable .pricingTable-header:before,3 s4 i7 a, Q1 W8 \
         .pricingTable .pricingTable-header:after{
  t2 W. U4 q/ f4 a6 F% }             content: "";3 |) C0 \6 [# a* d7 ~0 [0 v
             width: 16px;
# p5 k2 v& B, M: X             height: 16px;1 n& j  r: b9 N/ R! O6 |
             border-radius: 50%;
# B8 T; i2 F; m$ Y. s             border: 1px solid #d9d9d8;( N, L1 ?2 Z, f
             position: absolute;/ v% g: |4 o; |: \) e
             bottom: 12px;
6 u( l( e1 M- L! P, f$ k7 ^7 y         }
  ]2 y' c# ~. n         .pricingTable .pricingTable-header:before{
9 N; j0 b& @9 P( l/ _             left: 40px;& K  u' ]' W. ]3 ?4 V6 G6 k3 G
         }
% s3 [( n! |7 B. r6 N         .pricingTable .pricingTable-header:after{( L% q0 O3 }4 [
             right: 40px;
; n, ~/ g# _/ l, z1 Q7 O6 B  k# ^         }
2 T. m/ t" O: v% p         .pricingTable .heading{
/ s1 N9 c1 A' F- _4 K             font-size: 20px;
8 S! i8 }( q" t             color: #fff;
: H0 ]' @) Z2 ?: a- s             text-transform: uppercase;
4 h1 R$ g' G) v6 ~6 ?6 Z             letter-spacing: 2px;  x: }& ?9 s1 ?1 g
             margin-top: 0;7 O- I8 o5 {  W
         }0 x9 G8 u3 J# e4 q% G# V) J
         .pricingTable .price-value{
7 |, W+ _+ g& B4 j" i             display: inline-block;
7 n/ q- c& ~, z" K: g& v/ Y             position: relative;+ r8 _0 H, o) r
             font-size: 55px;
$ \! N$ S* E% y7 }( B, c- d4 z' P             font-weight: bold;" F. C0 P( E9 O; ?8 O+ A2 t
             color: #09b1c5;' V; O# D1 `; N) |
             transition: all 0.3s ease 0s;
, [6 g  R+ X% p( G1 I8 j# n         }0 \% g; x7 g& |1 _
         .pricingTable:hover .price-value{0 S) ^4 W0 I/ z) Q, o
             color: #fff;# D# A) a4 K  {$ |6 t
         }& g+ ^$ I; {* D
         .pricingTable .currency{
7 a; Y8 v/ b9 u2 V& c             font-size: 30px;. M  t  {; P  ]7 G- E
             font-weight: bold;
: b0 g3 H; W8 m  z             position: absolute;
" N6 K* z$ J3 x0 G. Y: Q6 Y             top: 6px;
% {! E# O' e7 Y5 Y             left: -19px;$ P7 L5 j8 V' g1 S& t
         }
+ z: i- y, e. G* d         .pricingTable .month{
6 v" s; B/ A" i" S0 ?) q  Y  H3 I# J             font-size: 16px;! k! Y1 M- k/ ^" C- Y
             color: #fff;. Y/ P4 P) y- N* _& P
             position: absolute;
$ }* D! }% \+ D) ~8 a             bottom: 15px;* o- K: G. G- U' O
             right: -30px;
5 ]1 e: Q6 u2 G' E             text-transform: uppercase;# c1 @0 k6 ~8 w/ P  K3 c
         }8 i$ E( @/ Y! u: @
         .pricingTable .pricing-content{; S; Q5 @: K/ n7 ]
             padding-top: 50px;/ B5 A; N: Z) x, t
             background: #fff;
6 n# R6 \: Q+ K1 U, z8 f             position: relative;
  ~+ V, m; p9 l) q5 I         }
( f8 I; G9 w- p' z3 _. q         .pricingTable .pricing-content:before,
0 U" I) H3 ~4 _+ z1 `/ m         .pricingTable .pricing-content:after{6 Y2 Z* z) \! T8 @9 {
             content: "";
. G1 b1 b" {* M( r$ s2 |: h/ q; P             width: 16px;6 P$ v! ?" {6 j! P
             height: 16px;
3 S6 r9 i: J8 L+ K/ J2 J% ~             border-radius: 50%;& W; ]2 O2 S7 A1 F0 S( h" Z( u
             border: 1px solid #7c7c7c;
3 {+ a! J% m$ k2 P' r3 L             position: absolute;
, T7 L% F8 V8 e; D, m& }9 v% G2 D3 Y             top: 12px;
( t- d3 v. f3 p% B4 B         }
" t) a6 V" O" _) s, Z         .pricingTable .pricing-content:before{* B( c! \1 p8 g7 y
             left: 40px;+ _  v4 X) F: v* U; i6 |! B) [
         }' s2 k3 F& p" {6 A
         .pricingTable .pricing-content:after{
, C1 d( s& o( m6 d+ i! y* j, _             right: 40px;5 _& F- T+ k- a. G( J) S6 J
         }
  Y3 z$ R3 h/ K/ @         .pricingTable .pricing-content ul{
! }( L/ X$ W% P( E" ]% |; X             padding: 0 20px;& e/ e" H. ?8 I( j$ K$ V
             margin: 0;0 v  ~8 C# T8 v6 [/ }- v1 l
             list-style: none;
$ w, i# L$ j5 q6 b% j3 E7 i! G         }; K6 ~) M3 \  l
         .pricingTable .pricing-content ul:before,
) q$ Q) W1 V6 I; n6 F( U# {# e         .pricingTable .pricing-content ul:after{5 R% C) w4 Z* Y- h7 O9 F3 m
             content: "";, A, T6 [, g( b  L6 Z
             width: 8px;' {+ t7 W1 F6 e5 r2 z6 O& }
             height: 46px;5 D6 v; Z, E- a5 f& k% n% O9 p; {! ^0 V
             border-radius: 3px;
/ R2 i" z4 o3 U9 w) t             background: linear-gradient(to bottom,#818282 50%,#727373 50%);7 I. {( r5 A7 v: s+ t9 N
             position: absolute;
* \1 Y& n1 f1 E) _  k             top: -22px;
$ g6 q( f7 f0 J9 i) r' W             z-index: 1;7 N0 n( E3 h5 M  p
             box-shadow: 0 0 5px #707070;
) R- Q. \) t/ N( a/ E. ~             transition: all 0.3s ease 0s;+ d$ W& L( `3 N2 ?7 X! [1 c  e
         }; D( \0 }7 T( t, P, f( s+ A
         .pricingTable:hover .pricing-content ul:before,
- B! G( s/ r3 ?0 g" B' J         .pricingTable:hover .pricing-content ul:after{
; |: F. t7 e! d' _& A( O% }             background: linear-gradient(to bottom, #40c4db 50%, #34bacc 50%);
# G. Z( j. Y) l8 `         }
1 D( d' U' ?( W$ V5 s9 N         .pricingTable .pricing-content ul:before{6 V. @, ?5 w* L9 r" M
             left: 44px;
# Q/ @9 ]1 [3 Y6 Y4 B  U3 a3 V         }7 d0 w1 A" _8 I  @5 Z" f
         .pricingTable .pricing-content ul:after{
9 N& g# ^, |1 J5 I7 v$ n2 E+ c  L             right: 44px;
  n0 L: O2 w5 r( a0 P, }+ p         }6 l) s1 m' G2 c/ s
         .pricingTable .pricing-content ul li{
3 v: _5 q, \+ i/ J: \2 I! S             font-size: 15px;7 ?$ T# K# N# A* D: i
             font-weight: bold;! i# b9 J3 L& d+ `7 ~7 `
             color: #777473;
) y. k0 G# @0 P8 ~             padding: 10px 0;$ X- ?# B2 |8 D$ K
             border-bottom: 1px solid #d9d9d8;$ z( q& ~  k& R7 n0 b
         }
2 l# R6 ]" r9 ^, Z3 b7 g' o* n         .pricingTable .pricing-content ul li:last-child{+ u8 [& Z8 V5 X. m6 Q
             border-bottom: none;: g" R# N7 @+ G3 X/ E2 K2 `
         }
2 a, g: W9 {& K1 O; U" m2 N         .pricingTable .read{
' c# V* }2 c3 q             display: inline-block;: t) Y8 B; u( B3 `& y/ B& x
             font-size: 16px;, z; n; R4 X  h$ v+ a
             color: #fff;
# w5 F$ E0 O( T# L; p' Z% G             text-transform: uppercase;
+ o1 S" e8 z+ g             background: #d9d9d8;& _1 H& T3 v4 D3 s: ~
             padding: 8px 25px;
9 q- Y' E/ {$ C. q+ d4 t9 ?  @             margin: 30px 0;
0 |1 h5 I$ r. Y  U             transition: all 0.3s ease 0s;
9 [3 x- W+ ^% t" g5 _4 H         }
* F  y9 J" I% ^0 ~1 |         .pricingTable .read:hover{$ _, S! C2 _& m  V5 _
             text-decoration: none;3 N, Q1 C2 g  Q4 [( U; G
         }5 ]2 ]% [7 @, R& M4 `# D3 V
         .pricingTable:hover .read{
# n- v, B! Y8 L& c             background: #09b1c5;
+ M2 E& Q" r" s: d' `& V. d: d% M         }: w+ K* C" l, v, o3 J
         @media screen and (max-width: 990px){
) m+ u! A: j/ y' P+ `+ I/ B/ f. Z7 G9 q             .pricingTable{ margin-bottom: 25px; }
  Q8 D0 U+ q1 t6 K+ }         }
# l/ B& m0 T1 S4 d  H* Z4 R' L% L' B         </style>1 z# Z7 b" S+ s; m% Y
         <!--[if IE]>8 T' P4 g% F) i/ Y7 F
                   <script src="js/html5shiv.min.js"></script>3 Q9 m% r) j) u. p6 X# D& U
         <![endif]-->
8 N0 Y5 p3 a7 K* S* e</head>% n4 Q" m& |- @* A2 Y( w, g9 e
<body>  M( g% E' u: C- w
        0 F, N/ C, z/ L4 U
         <div class="demo" style="background:#c0bfbf;padding: 1em 0;">1 B' u. ?- V( J0 l1 ?
                   <div class="container">* D8 k+ C: a% K' p3 \* J
                            <div class="row">
8 \. X) E! N7 ]; X                                     <div class="col-md-3 col-sm-6">0 T  Q$ A2 o8 {( [7 M8 c
                                               <div class="pricingTable">3 N' A1 s3 H  q9 e% Y+ h
                                                        <div class="pricingTable-header">+ W& Z8 v" `6 p
                                                                 <h3 class="heading">标准型</h3>
+ Q( `) F" M# w6 P5 X                                                                 <span class="price-value">
4 v& n9 l# T5 D6 R; E# C                                                                           <span class="currency">¥</span> 10- Z: L4 {, n  o: U/ N% w8 U
                                                                           <span class="month">/月</span>, w7 u4 h1 ~9 p# z- S
                                                                 </span>
/ n: J3 e( h1 u, ^                                                        </div>
. q# l  F* Q- P( X6 l4 v3 K5 P                                                        <div class="pricing-content">
7 I- [0 x, I- ?! ~                                                                 <ul>
; ^7 a- w3 r5 n' ~' j                                                                           <li>50GB 硬盘空间</li>- r$ r1 g% a# D
                                                                           <li>50 邮箱账号</li>& M0 I! ?  _$ t: l. d
                                                                           <li>50GB 月流量</li>8 j% }9 f2 v$ m! B. d' m
                                                                           <li>10 二级域名</li>
4 ?" E( B! G/ r9 y' y                                                                           <li>15 顶级域名</li>( _+ s, X# P. x/ ?
                                                                 </ul>
5 M' h2 E" l4 i# X  Q                                                                 <a href="#" class="read">立即购买</a>  ]+ X$ F/ n/ A
                                                        </div>
. z8 F  T1 m( v5 x  P( j                                               </div>" Y4 x, x; _; @8 g
                                     </div>
5 S* _# s  n1 y+ M% J 0 R( E9 k7 ?- g+ D
                                     <div class="col-md-3 col-sm-6">
/ Q7 j( p; S0 ~' o6 s                                               <div class="pricingTable">3 k' \$ C0 `, h8 y: M5 @$ V
                                                        <div class="pricingTable-header">  O! _9 P6 G$ n2 @
                                                                 <h3 class="heading">商务型</h3>5 R$ q- i3 x" C6 q. a4 U. F* X
                                                                 <span class="price-value">
5 g; K; X# I+ ]                                                                           <span class="currency">¥</span> 20
' V+ }9 i! y3 ^% f4 I                                                                           <span class="month">/月</span>
3 t3 _5 W! m: \+ u                                                                 </span>* T) C- E+ g9 r( `8 H# a
                                                        </div>0 f, G9 k( `& f$ U5 P" H
                                                        <div class="pricing-content">& e$ C" t+ V. G( V! V
                                                                 <ul>
6 k" S7 I3 a5 E1 d* T                                                                           <li>60GB 硬盘空间</li>
6 P' V& L+ d4 }" N                                                                           <li>60 邮箱账号</li>
$ f: G2 R6 v+ k' h; F# J                                                                           <li>60GB 月流量</li>; q$ U" X- K) H8 u5 [7 D8 K1 c
                                                                           <li>15 二级域名</li>8 w2 m. j+ Q. [6 V
                                                                           <li>20 顶级域名</li>
: s9 U* r( f$ m                                                                 </ul>
2 e5 \- N/ Y& Y- n* j" M                                                                 <a href="#" class="read">立即购买</a>/ s! z. C+ T1 J: L
                                                        </div>
( V0 Z( u& z; k+ @( D                                               </div>9 z% u& {  r. |) \" W" `' I
                                     </div>2 f4 s, E, Z+ y, j2 y: s0 j
5 `! D/ Y, Q6 h+ i
                                     <div class="col-md-3 col-sm-6">7 b' G# j2 V; \8 k4 K
                                               <div class="pricingTable">$ Q: B4 I8 O% B+ |
                                                        <div class="pricingTable-header">
/ t( G% o" n* G% w) f% D                                                                 <h3 class="heading">旗舰型</h3>& p% C/ w) v$ M9 d/ z* s. V, t
                                                                 <span class="price-value">7 m; c+ s/ T5 U- g: C: v' j
                                                                           <span class="currency">¥</span> 30! }8 j! P. N: l9 z  f3 b
                                                                           <span class="month">/月</span>" X( \! e; M, h6 g
                                                                 </span>
$ z6 Q' j! Z5 Q9 c                                                        </div>9 P0 _9 C/ A5 z
                                                        <div class="pricing-content">
$ W; l) u" ?- L5 j! V. w2 l  b                                                                 <ul>
6 `5 z  U- a) M                                                                           <li>70GB 硬盘空间</li>
/ _7 |* R% f  B                                                                           <li>70 邮箱账号</li>
, T# O# K0 ]8 ~! A  Y. }                                                                           <li>70GB 月流量</li>: C$ y4 |8 \8 G" x  ^6 ~
                                                                           <li>20 二级域名</li>" O) s/ u. z; b' g9 x2 E% y4 a
                                                                           <li>25 顶级域名</li>
1 ?; j; M* M& _1 p  O; n                                                                 </ul>
' C2 Z) m7 c3 h7 A) K                                                                 <a href="#" class="read">立即购买</a>; b( g# \  e, n; c' `& E) \
                                                        </div>
9 |! _+ u/ w& |$ O' U9 M; ~                                               </div>$ }1 E; {/ v, v4 K6 |* u$ R
                                     </div>+ ^+ \3 s% v$ v6 {4 L' c8 p

7 J4 R3 M* _. l% N3 {; J: D                                     <div class="col-md-3 col-sm-6">$ }: X* h  A' A6 {6 [1 h
                                               <div class="pricingTable">
8 c1 r  `; ^" o; Z, v9 k6 [                                                        <div class="pricingTable-header">3 v/ e3 ]# j6 p2 r
                                                                 <h3 class="heading">至尊型</h3>' C& c& `6 w) [' m
                                                                 <span class="price-value">2 E; N: v. @" {1 u' ]( C
                                                                           <span class="currency">¥</span> 40- X! z+ [' {1 s$ \: C8 \4 f; y6 ~0 W
                                                                           <span class="month">/月</span>
: b3 _5 F8 z& E' D: k) G0 f* u; Q                                                                 </span>
8 M& F; O0 f8 y: a! @                                                        </div>
9 r5 l& A5 ^3 L: D                                                        <div class="pricing-content">
0 `# B/ _! ?9 M" q( [                                                                 <ul>
3 B, Q1 R* `4 t: _% A                                                                           <li>80GB 硬盘空间</li>4 q( \8 j, f0 l5 b
                                                                           <li>80 邮箱账号</li>/ o0 t7 Y4 z: J
                                                                           <li>80GB 月流量</li>
$ q( X2 s2 x: j) E% F$ R                                                                           <li>25 二级域名</li>0 |. I6 H) p" w0 f$ q4 ?" e1 |+ W! S
                                                                           <li>30 顶级域名</li>
. d: {- K: q6 }( \4 B. M$ i* H                                                                 </ul>3 ~8 I7 x/ @5 \; [' R3 x$ E
                                                                 <a href="#" class="read">立即购买</a>2 T8 _1 p% F4 r, _8 R0 E  i+ C
                                                        </div>7 X0 I$ J" u% N4 E+ y' A
                                               </div>1 o6 L! h: _/ T( P6 v/ E
                                     </div>3 |* {: V2 f0 F
                            </div>
& d  v3 i" ]; X# H                   </div>
1 w8 O6 N/ X7 ^2 ]) N# u  m4 G         </div>
$ s% N2 ~: M. w3 m+ w        : m+ Z0 @/ b) E, I  D- a
</body>
# R! M. _, i1 s( |/ P4 G</html>

# |( x1 l4 |. ?! ^. s  H. Q" ?4 G2 p0 B% S7 M" ^

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




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

本版积分规则

广告

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

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

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

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

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