Ajax Loader
×
HTML
<div class="user-clo-wp">
1
<div class="user-clo-wp">
2
  <h2><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/14/rBEQYVGUg6oIAAAAAALoCOqljg8AABTMgFOxkcAAugg597.jpg" alt=""></h2>
3
  <ul class="user-clo-bd">
4
    <li><a href="#" title="点击抢购"><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/14/rBEQYVGUg6oIAAAAAAFSJzSqa4AAABTMgFbloAAAVI_570.jpg" alt="" /><span></span></a></li>
5
    <li><a href="#" title="点击抢购"><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/14/rBEQYFGUg6UIAAAAAAEuVL-1SokAABTMgFwONkAAS5s129.jpg" alt="" /><span></span></a></li>
6
    <li><a href="#" title="点击抢购"><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/14/rBEQYVGUg6sIAAAAAAE7ZR_8HG4AABTMgGDlO4AATt9285.jpg" alt="" /><span></span></a></li>
7
    <li><a href="#" title="点击抢购"><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/14/rBEQYVGUg6wIAAAAAAFBN8n5H3kAABTMgG7rlYAAUFP018.jpg" alt="" /><span></span></a></li>
8
    <li><a href="#" title="点击抢购"><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/14/rBEQYVGUg60IAAAAAAEzjBmZYWoAABTMgHssyUAATOk164.jpg" alt="" /><span></span></a></li>
9
    <li><a href="#" title="点击抢购"><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/14/rBEQYFGUg6YIAAAAAAE0Dy2fHj4AABTMgHLZsMAATQn849.jpg" alt="" /><span></span></a></li>
10
    <li><a href="#" title="点击抢购"><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/14/rBEQYFGUg6gIAAAAAAF9RvHRqBwAABTMgIXv8oAAX1e059.jpg" alt="" /><span></span></a></li>
11
    <li><a href="#" title="点击抢购"><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/14/rBEQYFGUg6oIAAAAAAFND3xmItYAABTMgKJ2twAAU0n588.jpg" alt="" /><span></span></a></li>
12
  </ul>
13
</div>
 
CSS
.user-clo-wp {
1
.user-clo-wp {
2
  width:990px;
3
  margin: 0  auto;
4
  background: #e7e7e7;
5
}
6
.user-clo-wp h2 {
7
  margin: 0;
8
  padding: 0;
9
}
10
.user-clo-wp img {
11
  border: none;
12
  display: block;
13
}
14
.user-clo-bd {
15
  list-style: none;
16
  margin: 0;
17
  padding:0 0 10px;
18
  overflow: hidden;
19
}
20
.user-clo-bd li {
21
  float: left;
22
  margin: 10px 0 0 10px;
23
  width: 235px;
24
  height: 570px;
25
}
26
.user-clo-bd a {
27
  display: block;
28
  width: 100%;
29
  height: 100%;
30
  position: relative;
31
}
32
.user-clo-bd img {
33
  display: block;
34
  border: none;
35
}
36
.user-clo-bd span {
37
  display:block;
38
  position: absolute;
39
  left: 0;
40
  top: 0;
41
  visibility: hidden;
42
  width: 235px;
43
  height: 570px;
44
  background: url(http://img10.360buyimg.com/imgzone/g12/M00/06/11/rBEQYFGUg6MIAAAAAAAPoqNq6d4AABR3QJ5JoIAABBS248.png) no-repeat 0 0;
45
}
46
.user-clo-bd a:hover span {
47
  visibility: visible;
48
}
 

Untitled

CSSDeck G+