CSS三种价格表样式-CSS应用实例

搞代码-CSS三种价格表样式-CSS应用实例(gaodaima.com)

* {

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%;

}

}

响应式价格表

重置浏览器查看效果。

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应用实例(gaodaima.com)

*{

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