metro 磁贴拖拽 html,”Metro UI之磁贴（二）

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

149

150

151

152

153

154 简单磁贴

155

156 这是磁贴的内容

157

158

159

160

161

162

163

164

165 简单磁贴

166

167 这是磁贴的内容

168

169

170

171

172

173

174

175

176

177 简单磁贴

178

179 这是磁贴的内容

180

181

182

183

单选(input [ radio ])

184

185

186

187

188

189

190

191 简单磁贴

192

193 这是磁贴的内容

194

195

196

197

198

199

200

201

202 简单磁贴

203

204 这是磁贴的内容

205

206

207

208

209

210

211

212

213 简单磁贴

214

215 这是磁贴的内容

216

217

218

219