1

2

3

4

5

6

Metro UI之磁贴(Tile)

7

8 body {

9 font-family: '微软雅黑';

10 background-color: #8b37f1;

11 }

12

13 p {

14 color: white;

15 }

16

17

18 .tile {

19 display: inline-block;

20 width: 200px;

21 height: 100px;

22 margin: 5px;

23 padding: 0;

24 overflow: hidden;

25 background-color: blue;

26 color: white;

27 font-family: '微软雅黑';

28 font-size: 30px;

29 vertical-align: middle;

30 cursor: pointer !important;

31 box-shadow: 0px 0px 5px #eee;

32 }

33

34 .tile label {

35 width: 200px;

36 height: 100px;

37 display: block;

38 }

39

40 .tile .title {

41 display: inline-block;

42 height: 100px;

43 width: 200px;

44 line-height: 100px;

45 vertical-align: middle;

46 text-align: center;

47 }

48

49 .tile .content {

50 position: relative;

51 height: 100px;

52 padding: 5px;

53 display: block;

54 word-wrap: break-word;

55 word-break: break-all;

56 font-family: '微软雅黑';

57 font-size: 14px;

58 }

59

60 .tile:hover {

61 -moz-box-shadow: 0px 0px 5px #ddd;

62 -webkit-box-shadow: 0px 0px 5px #ddd;

63 box-shadow: 0px 0px 5px #ddd;

64 }

65

66 .tile:hover .content {

67 margin-top: -100px;

68 }

69

70 .tile input[type='checkbox'], .tile input[type='radio'] {

71 width: 40px;

72 height: 40px;

73 margin: 0;

74 padding: 0;

75 float: right;

76 position: relative;

77 outline: none !important;

78 border: 0 !important;

79 top: 0;

80 right: 0;

81 display: none;

82 }

83

84 .tile .symbol {

85 display: inline-block !important;

86 width: 40px;

87 height: 40px;

88 position: relative;

89 top: 2px;

90 right: 2px;

91 float: right;

92 margin-bottom: -40px;

93 z-index: 10000;

94 }

95

96 .tile input[type='checkbox']:checked ~ .symbol, .tile input[type='radio']:checked ~ .symbol {

97 background-image: url('../Images/tile_selected_symbol.png');

98 }

99

100 /*颜色*/

101 .tile-blue {

102 background-color: blue;

103 color: white;

104 }

105

106 .tile-blue .content {

107 background-color: white;

108 color: blue;

109 }

110

111 .tile-yellow {

112 background-color: yellow;

113 color: blue;

114 }

115

116 .tile-yellow .content {

117 background-color: blue;

118 color: yellow;

119 }

120

121 .tile-green {

122 background-color: green;

123 color: white;

124 }

125

126 .tile-green .content {

127 background-color: white;

128 color: green;

129 }

130

131 .tile-pink {

132 background-color: deeppink;

133 color: white;

134 }

135

136 .tile-pink .content {

137 background-color: white;

138 color: deeppink;

139 }

140

141

142

143

144

145 Metro UI之磁贴(Tile) IE9+

146

147

多选(input [ checkbox ])

148

159

170

171

182

183

单选(input [ radio ])

184

196

207

218

219