Ajax Loader
×
HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
<title>无标题文档</title>
6
</head>
7
 
8
<body>
9
<div class="user-tp-header">
10
    <div class="user-tp-header-top w990">
11
      <h1><a href=""><img src="http://img10.360buyimg.com/imgzone/g12/M00/06/04/rBEQYVGTG0kIAAAAAAAo91d9sqkAABM0wPSEYIAACkP249.png" alt=""></a></h1>
12
      <ul class="user-tp-ensure-icon">
13
        <li class="ensure1">正品保证</li>
14
        <li class="ensure2">7天退换</li>
15
        <li class="ensure3">闪电发货</li>
16
      </ul>
17
  </div>
18
19
   <div class="user-tp-header-nav-wr">
20
       <div class="user-tp-header-nav w990">  
21
              <ul>    
22
                <li class="user-home">
23
                  <a href="http://mall.jd.com/index-15037.html" title="首页"><span></span>首页</a>
24
                </li>    
25
                <li>
26
                  <a href="http://mall.jd.com/view_search-53194-56200-1-0-20-1.html" title="羽毛球拍">羽毛球拍</a>
27
                </li>    
28
                <li>
29
                  <a href="http://mall.jd.com/view_search-53194-78161-1-0-20-1.html" title="运动鞋">运动鞋</a>
30
                </li>
31
                        <li>
32
                  <a href="http://mall.jd.com/view_search-53194-78161-1-0-20-1.html" title="运动服">运动服</a>
33
                </li>          
34
                <li>
35
                  <a href="http://mall.jd.com/view_search-53194-80672-1-0-20-1.html" title="网球拍">网球拍</a>
36
                </li>    
37
                <li>
38
                  <a href="http://mall.jd.com/view_search-53194-99545-1-0-20-1.html" title="运动护具">运动护具</a>
39
                </li>    
40
                <li>
41
                  <a href="http://mall.jd.com/view_search-53194-0-5-1-24-1.html" title="热卖推荐">热卖推荐</a>
42
                </li>    
43
                <li>
44
                  <a href="http://mall.jd.com/view_search-53194-0-1-1-24-1.html" title="新品上市">新品上市</a>
45
                </li>  
46
              </ul>
47
            </div>
48
    </div>
49
  </div>
50
</body>
51
</html>
52
 
 
CSS 
ul, li {
1
ul, li {
2
  margin: 0;
3
  padding: 0;
4
  list-style: none;
5
}
6
.user-tp-header {
7
  width: 100%;
8
  height: 140px;
9
  overflow: hidden;
10
  background-color: #f7f7f9;
11
}
12
.w990 {
13
  width: 990px;
14
  margin: 0 auto;
15
}
16
.user-tp-header-top {
17
  height: 100px;
18
  overflow: hidden;
19
  background-color: #f7f7f9;
20
}
21
.user-tp-header-top h1 {
22
  float: left;
23
  width: 388px;
24
  height: 62px;
25
  margin: 18px 0 0 15px;
26
 
27
}
28
.user-tp-ensure-icon {
29
  float: right;
30
  /* margin: 0 40px 0 0; */
31
}
32
.user-tp-ensure-icon li {
33
  float: left;
34
  width: 60px;
35
  height: 60px;
36
  margin: 18px 50px 0 0;
37
  overflow: hidden;
38
  background: url(http://img10.360buyimg.com/imgzone/g12/M00/06/04/rBEQYVGTG0kIAAAAAAAsV577lJUAABM0wPe-iYAACxv450.png) no-repeat 0 0;
39
  text-indent: -999em;
40
}
41
.user-tp-ensure-icon .ensure2 {
42
  background-position: -60px 0;
43
}
44
.user-tp-ensure-icon .ensure3 {
45
  background-position: -120px 0;
46
}
47
.user-tp-header-nav-wr {
48
  /* height: 40px; */
49
  background-color: #1e1e21;
50
}
51
.user-tp-header-nav {
52
  overflow: hidden;
53
  /* heigt: 36px; */
54
  background-color: #1e1e21;
55
}
56
 
57
.user-tp-header-nav li {
58
  float: left;
59
  /* width: 100px; */
60
  /* line-height: 36px; */
61
  /* padding: 16px 15px; */
62
}
63
.user-tp-header-nav .user-home span {
64
  float: left;
65
  display: block;
66
  width: 16px;
67
  height: 15px;
68
  margin: 0 10px 0 0;
69
  background: url(http://perfectum.ecommerce-any-themes.com/themes/perfectum/img/home-icon.png) no-repeat 0 0;
70
}
71
.user-tp-header-nav a {
72
  display: block;
73
  /* width: 100%; */
74
  /* height: 36px; */
75
  padding: 10px 30px;
76
  border-top: 4px solid #1e1e21;
77
  color: #fff;
78
  font-size: 14px;
79
  text-align: center;
80
  text-decoration: none;
81
  -webkit-transition: all 0.4s ease;
82
  -moz-transition: all 0.4s ease;
83
  -ms-transition: all 0.4s ease;
84
  -o-transition: all 0.4s ease;
85
  transition: all 0.4s ease;
86
}
87
.user-tp-header-nav a:hover {
88
  color: #000;
89
  border-top-color: #f2532f;
90
  background-color: #fff;
91
}
 

Untitled

CSSDeck G+