forked from LittlewhiteChen/baidu
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
258 lines (251 loc) · 12.2 KB
/
index.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>百度新首页网址导航</title>
<link rel="stylesheet" href="css/common.css"/>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div class="skinBg" style="background-image: url('images/65.jpg');"></div>
<header id="header">
<div class="weather fl">
<span class="cityW">
<span>苏州：</span>
<span>
<span class="weatherIcon wI1"></span>
<span>35 ~ 24℃</span>
</span>
</span>
<span class="sp">|</span>
<span class="pollution">
<span>空气质量：83</span>
<span class="polutionLevel">良</span>
</span>
<div class="cityWeather">
</div>
</div>
<nav class="headNavs fr tr">
<a href="#"><span class="s-icon s-icon-treasure"></span><span>宝箱</span></a>
<a href="#"><span class="s-icon s-icon-skin"></span><span>换肤</span></a>
<a href="#"><span class="s-icon s-icon-msg"></span><span>消息</span></a>
<a><span class="s-icon s-icon-line"></span></a>
<a href="#"><span>设为首页</span></a>
<a href="javascript:;" class="uname"><span>审美网</span><span class="user-arrow"></span></a>
<div class="topMenus dn">
<span class="arrowTop"></span>
<a href="#">个人中心</a>
<a href="#">帐号设置</a>
<a href="#">搜索设置</a>
<a href="#">意见反馈</a>
<a href="#">首页教程</a>
<a href="#">安全退出</a>
</div>
</nav>
</header>
<div class="content tc">
<p class="logo"><img width="270" height="129" src="images/logo_white.png" alt="logo" /></p>
<nav class="mainNavs">
<a href="#">新闻</a>
<a href="#">网页</a>
<a href="#">贴吧</a>
<a href="#">知道</a>
<a href="#">音乐</a>
<a href="#">图片</a>
<a href="#">视频</a>
<a href="#">地图</a>
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">更多>></a>
</nav>
<div class="searchBox">
<form action="">
<input type="text" class="searchIpt f14" name="wd" maxlength="100" autocomplete="off"/>
<input type="submit" class="btn cp" value="百度一下" />
</form>
</div>
<div class="mainContents oh">
<div class="menusWrapper fl">
<a class="active" href="javascript:;">导航</a>
<a href="javascript:;">新闻</a>
<a href="javascript:;">世界杯</a>
<a href="javascript:;">音乐</a>
<a href="javascript:;">团购</a>
</div>
<div class="ctnerWrapper">
<div class="ctnerBox">
<div id="cbox-1" class="cbox tl dn">
<div class="ctnerTab pr tc">
<a href="#">我的导航</a> <a href="#" class="on">推荐导航</a>
</div>
<div class="myNavs rtNavs dn pt15">
<div class="navTitle fl">我的导航</div>
<div class="navArea oh">
<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
</div>
</div>
<div class="hotNavs rtNavs dn oh pt15">
<div class="navTitle fl">热门网址</div>
<div class="navArea oh">
<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/102.png" alt="" /></a>
<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/103.png" alt="" /></a>
<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/104.png" alt="" /></a>
<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/20.png" alt="" /></a>
<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/106.png" alt="" /></a>
<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/107.png" alt="" /></a>
<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/108.png" alt="" /></a>
<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/109.png" alt="" /></a>
<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/110.png" alt="" /></a>
<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/111.png" alt="" /></a>
<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/112.png" alt="" /></a>
<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/113.png" alt="" /></a>
<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/114.png" alt="" /></a>
<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/115.png" alt="" /></a>
<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/116.png" alt="" /></a>
<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/12.png" alt="" /></a>
<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/117.png" alt="" /></a>
</div>
</div>
</div>
<div id="cbox-2" class="cbox tl dn">
<div class="newsBox oh">
<div class="sliderBox fl">
<div class="slider">
<a href="#" target="_blank" class="picLink active">
<img width="425" height="260" src="images/news1.jpg" alt="" />
<span href="#" target="_blank" class="picTitle">哈尔滨江边出现涉黄服务"老头乐"</span>
</a>
<a href="#" target="_blank" class="picLink">
<img width="425" height="260" src="images/news2.jpg" alt="" />
<span href="#" target="_blank" class="picTitle">新闻标题2</span>
</a>
<a href="#" target="_blank" class="picLink">
<img width="425" height="260" src="images/news3.jpg" alt="" />
<span href="#" target="_blank" class="picTitle">新闻标题3</span>
</a>
<a href="#" target="_blank" class="picLink">
<img width="425" height="260" src="images/news4.jpg" alt="" />
<span href="#" target="_blank" class="picTitle">新闻标题4</span>
</a>
<a href="#" target="_blank" class="picLink">
<img width="425" height="260" src="images/news5.jpg" alt="" />
<span href="#" target="_blank" class="picTitle">新闻标题5</span>
</a>
</div>
<div class="smallPics">
<a class="active"><img width="68" height="40" src="images/news1.jpg" alt="" /></a>
<a><img width="68" height="40" src="images/news2.jpg" alt="" /></a>
<a><img width="68" height="40" src="images/news3.jpg" alt="" /></a>
<a><img width="68" height="40" src="images/news4.jpg" alt="" /></a>
<a><img width="68" height="40" src="images/news5.jpg" alt="" /></a>
</div>
</div>
<div class="topic">
<div class="topicTop">
<span class="titleWords titleT on"><a href="javascript:;">搜索风云榜</a></span>
<span class="titleTopic titleT"><a href="javascript:;">热门话题</a></span>
<a class="changeWords" href="javascript:;">换一换</a>
</div>
<div class="topicList">
<div class="wBox topicB dn">
<ul>
<li><a target="_blank" href="#">男子入教当卧底救妻</a></li>
<li><a target="_blank" href="#">广西无人海岛售14...</a></li>
<li><a target="_blank" href="#">北京大雨</a></li>
<li><a target="_blank" href="#">世界杯星太太团</a></li>
<li><a target="_blank" href="#">13岁印度女孩登顶珠...</a></li>
<li><a target="_blank" href="#">dnf职业联赛半决赛</a></li>
<li><a target="_blank" href="#">疑似mh370坠毁噪音</a></li>
<li><a target="_blank" href="#">李保田儿子</a></li>
<li><a target="_blank" href="#">6城试点共有产权房</a></li>
<li><a target="_blank" href="#">陕西推土机毁燕子窝</a></li>
<li><a target="_blank" href="#">老师住深山出高考题</a></li>
<li><a target="_blank" href="#">越方冲撞中方船只1200次</a></li>
<li><a target="_blank" href="#">星空日记</a></li>
<li><a target="_blank" href="#">肉饼店老板因相貌引围观...</a></li>
<li><a target="_blank" href="#">高圆圆结婚</a></li>
<li><a target="_blank" href="#">诺曼底登陆</a></li>
</ul>
</div>
<div class="tBox topicB dn">
<ul>
<li><a target="_blank" href="#">话题11111</a></li>
<li><a target="_blank" href="#">话题22222</a></li>
<li><a target="_blank" href="#">话题33333</a></li>
<li><a target="_blank" href="#">话题44444</a></li>
<li><a target="_blank" href="#">话题55555</a></li>
<li><a target="_blank" href="#">话题66666</a></li>
<li><a target="_blank" href="#">话题77777</a></li>
<li><a target="_blank" href="#">话题88888</a></li>
<li><a target="_blank" href="#">话题99999</a></li>
<li><a target="_blank" href="#">话题11111</a></li>
<li><a target="_blank" href="#">话题22222</a></li>
<li><a target="_blank" href="#">话题33333</a></li>
<li><a target="_blank" href="#">话题44444</a></li>
<li><a target="_blank" href="#">话题55555</a></li>
<li><a target="_blank" href="#">话题66666</a></li>
<li><a target="_blank" href="#">话题77777</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="cbox-3" class="cbox tl dn">
<p class="pt15 tc f14">4，其他这几个 这里就忽略掉了！意思意思算了...</p>
</div>
<div id="cbox-4" class="cbox tl dn">
<p class="pt15 tc f14">5，其他这几个这里就忽略掉了！意思意思算了...</p>
</div>
<div id="cbox-5" class="cbox tl dn">
<p class="pt15 tc f14">6，其他这几个这里就忽略掉了！意思意思算了...</p>
</div>
</div>
</div>
</div>
</div>
<footer id="footer" class="tc">©2014 Baidu 使用百度前必读 京ICP证030173号</footer>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.autocomplete.min.js"></script>
<script>
$('.uname,.topMenus').hover(function(){
$('.topMenus').stop(true,true).fadeIn(200);
},function(){
$('.topMenus').stop(true,true).delay(500).fadeOut(200);
});
//搜索框自动补全;
$('.searchIpt').AutoComplete({
'data': ['About Me', '审美网', 'abcdefg', 'One', 'Two', 'Three', 'Four', 'Five', 'Six','smwell.com', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
'itemHeight': 24,
'width': 529
}).AutoComplete('show');
$('.ctnerTab a').click(function(){
if(!$(this).hasClass('on')){
$('.ctnerTab a').removeClass('on').eq($(this).index()).addClass('on');
$('.rtNavs').stop(true,true).hide(200).eq($(this).index()).show(300);
}
});
$('.menusWrapper a').click(function(){
if(!$(this).hasClass('active')){
$('.menusWrapper a').removeClass('active').eq($(this).index()).addClass('active');
$('.cbox').stop(true,true).animate({top:318},100).hide().eq($(this).index()).animate({top:0},400).show();
}
});
$('.smallPics a').click(function(){
if(!$(this).hasClass('active')){
$('.smallPics a').removeClass('active').eq($(this).index()).addClass('active');
$('.picLink').stop(true,true).removeClass('active').eq($(this).index()).addClass('active');
}
});
$('.titleT').hover(function(){
if(!$(this).hasClass('on')){
$('.titleT').removeClass('on').eq($(this).index()).addClass('on');
$('.topicB').stop(true,true).hide().eq($(this).index()).show();
}
});
</script>
</body>
</html>