Ajax Loader
×
HTML
<div class="user-three-column">
1
<div class="user-three-column">
2
  <ul>
3
    <li class="user-three-column-new"><a href="http://mall.jd.com/view_search-53194-0-1-1-24-1.html" target="_blank" title="新品上市">NEW ARRIVE新品上市</a></li>
4
    <li class="user-three-column-hot"><a href="http://mall.jd.com/view_search-53194-0-5-1-24-1.html" target="_blank" title="热卖推荐">HOT SALE 热卖推荐</a></li>
5
    <li class="user-three-column-good"><a href="http://mall.jd.com/view_search-53194-0-3-1-24-1.html" target="_blank" title="好评排行">GOOD RATE 好评推行</a></li>
6
  </ul>
7
</div>
 
CSS
.user-three-column {
1
.user-three-column {
2
  width: 990px;
3
  height: 170px;
4
  margin: 0 auto;
5
  padding: 0;
6
  background: url(http://img10.360buyimg.com/imgzone/g12/M00/06/1E/rBEQYVGVlEoIAAAAAAAeguos_6YAABWxAAZgrMAAB6a641.png) no-repeat 0 0;
7
}
8
.user-three-column ul {
9
  list-style: none;
10
  margin: 0;
11
  padding: 0;
12
  overflow: hidden;
13
}
14
.user-three-column li {
15
  float: left;
16
  display: inline;
17
  width: 310px;
18
  height: 121px;
19
  margin: 15px 0 0 15px;
20
 
21
}
22
.user-three-column a {
23
  display: block;
24
  width: 100%;
25
  height: 100%;
26
  text-indent: -9999px;
27
  overflow: hidden;
28
  background: url(http://img10.360buyimg.com/imgzone/g12/M00/07/00/rBEQYVGVtu0IAAAAAAC4epKrcsMAABXxAIbx0sAALiS597.png) no-repeat 0 0;
29
}
30
.user-three-column .user-three-column-new a:hover {
31
  background-position: -310px 0;
32
}
33
.user-three-column .user-three-column-hot a {
34
  background-position: 0 -121px;
35
}
36
.user-three-column .user-three-column-hot a:hover {
37
  background-position: -310px -121px;
38
} 
39
.user-three-column .user-three-column-good a {
40
  background-position: 0 -242px;
41
}
42
.user-three-column .user-three-column-good a:hover {
43
  background-position: -310px -242px;
44
}
 

Untitled

CSSDeck G+