CSS三种价格表样式-CSS应用实例
搞代码-CSS三种价格表样式-CSS应用实例()
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
响应式价格表
重置浏览器查看效果。
Basic$ 9.99 / year10GB Storage10 Emails10 Domains1GB BandwidthSign UpPro$ 24.99 / year25GB Storage25 Emails25 Domains2GB BandwidthSign UpPremium$ 49.99 / year50GB Storage50 Emails50 Domains5GB BandwidthSign Up
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
搞代码-CSS三种价格表样式-CSS应用实例()
*{
box-sizing:border-box;
}
.columns{
float:left;
width:33.3%;
padding:8px;
}
.price{
list-style-type:none;
border:1pxsolid#eee;
margin:0;
padding:0;
-webkit-transition:0.3s;
transition:0.3s;
}
.price:hover{
box-shadow:08px12px0rgba(0,0,0,0.2)
}
.price .header{
background-color:#111;
color:white;
font-size:25px;
}
.price li{
border-bottom:1pxsolid#eee;
padding:20px;
text-align:center;
}
.price .grey{
background-color:#eee;
font-size:20px;
}
.button{
background-color:#4CAF50;
border:none;
color:white;
padding:10px25px;
text-align:center;
text-decoration:none;
font-size:18px;
}
@media only screen and (max-width: 600px){
.columns{
width:100%;
}
}
响应式价格表
重置浏览器查看效果。
Basic
$9.99/year
10GBStorage10Emails10Domains1GBBandwidth
SignUp
