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
如果觉得《metro 磁贴拖拽 html ”Metro UI之磁贴（二）》对你有帮助，请点赞、收藏，并留下你的观点哦！
