-
Notifications
You must be signed in to change notification settings - Fork 0
/
首页导航和搜索合并.html
147 lines (143 loc) · 3.56 KB
/
首页导航和搜索合并.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body {
font-family: arial;
font-size: 12px;
}
.redColor {
color:#c40000 !important;
}
nav.top {
background-color: #f2f2f2;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid #e7e7e7;
}
nav.top a span.glyphicon {
margin-right: 3px;
}
nav.top a span.glyphicon-menu-down {
color: #999999 !important;
margin-left: 2px;
width: 5px !important;
height: 4px !important;
}
nav.top span,nav.top a {
margin: 0 10px 0 10px;
color: #999999;
}
nav.top a:hover {
color: #C40000;
text-decoration: none;
}
div.searchDiv {
background-color: #C40000;
width: 620px;
height: 40px;
margin: 30px auto;
padding: 1px;
display: block;
}
div.searchDiv input {
width: 500px;
border: 1px solid transparent;
height: 36px;
margin: 1px;
outline: none;
font-size: 15px;
}
div.searchDiv button {
width: 110px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 20px;
font-weight: bold;
}
div.searchBelow {
margin-top: 3px;
margin-left: -20px;
}
div.searchBelow span {
color: #999;
}
div.searchBelow a {
padding: 0 20px 0 20px;
font-size: 15px;
color: #999999;
}
img.logo {
position: absolute;
top: 20px;
left: 30px;
z-index: -1;
}
div.searchBelow a:hover {
text-decoration: none;
}
</style>
<body>
<nav class="top">
<a href="###">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵！欢迎来天猫</span>
<a href="###">请登录</a>
<a href="###">免费注册</a>
<span class="pull-right">
<a href="forebought">我的订单</a>
<a href="focus">
<span class="glyphicon glyphicon-heart redColor"></span>
我关注的品牌
</a>
<a href="forecart">
<span class="glyphicon glyphicon-shopping-cart redColor"></span>
购物车<strong>0</strong>件
</a>
<span>|</span>
<a href="phone">
<span class="glyphicon glyphicon-phone redColor"></span>
手机版
</a>
<a href="phone">
淘宝网
</a>
<a href="phone">
企业购
</a>
<a href="phone">
商家支持
</a>
<a href="phone" style="margin-right: 45px;">
<span class="glyphicon glyphicon-th-list redColor"></span>
网站导航
<span class="glyphicon glyphicon-menu-down redColor"></span>
</a>
</span>
</nav>
<a href="###">
<img class="logo" src="http://how2j.cn/tmall/img/site/logo.gif" id="logo">
</a>
<div class="searchDiv">
<input id="input" placeholder="太阳镜 时尚男鞋" name="keyword" />
<button type="submit" class="searchButton">搜索</button>
<div class="searchBelow">
<span> <a href="###" style="color: red;"> 平衡车 </a> <span>|</span>
</span> <span> <a href="###"> 扫地机器人 </a> <span>|</span>
</span> <span> <a href="###" style="color: red;"> 原汁机 </a> <span>|</span>
</span> <span> <a href="###"> 冰箱 </a><span>|</span></span>
<span> <a href="###" style="color: red;"> 洗衣机 </a><span>|</span></span>
<span> <a href="###"> 沙发 </a></span>
</div>
</div>
</body>
</html>