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