-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
469 lines (429 loc) · 17.7 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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link media="all" rel="stylesheet" href="css/reset.css" type="text/css" />
<link media="all" rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 9]>
<link media="all" rel="stylesheet" href="css/ie.css" type="text/css" />
<![endif]-->
<title>个人中心</title>
</head>
<body>
<div class="main">
<div class="topbar cf">
<div class="logo fl">
<a href="home.html" title="QQ空间">
<img src="images/logo.png" alt="QQ空间" width="106" height="34" />
<span>QQ空间</span>
</a>
</div>
<div class="weather fl">
<img src="images/weather.png" alt="晴" width="82" height="61" title="晴" />
<span id="weather">晴</span>
</div>
<div class="msg fl">
<span class="msg_item fl">
<a href="#" class="item_friend">好友</a>
<span class="msg_num"><em id="msgNumFriend">10</em></span>
</span>
<span class="msg_item fl">
<a href="#" class="item_campus">校友</a>
</span>
<span class="msg_item fl">
<a href="#" class="item_weibo">微博</a>
</span>
</div>
<form action="" class="search fr">
<input id="searchInput" class="search_input fl" name="search" type="text" value="输入话题/QQ号/昵称…" />
<input class="search_button fr" type="button" title="点击开始搜索" />
</form>
<div class="main_menu fr">
<ul>
<li class="menu_focus"><a href="#">首页</a></li>
<li><a href="#">我的主页</a></li>
<li><a href="#">设置</a></li>
<li class="divition"><a href="#">切换普通版</a></li>
</ul>
</div>
</div><!--end of topbar-->
<div class="content cf">
<div class="right fr">
<div class="center fl" id="center">
<form action="" class="mood_poster cf">
<input id="moodPosterContent" class="mood_poster_text fl" name="moodPosterContent" type="text" value="开心的，难过的，别忘了记录下来…" />
<input class="add_photo fl" type="button" title="插入照片"/>
<input class="add_media fl" type="button" title="插入多媒体" />
<input class="add_link fl" type="button" title="插入链接" />
</form>
<div class="friend_trends_wrap">
<h3>好友动态</h3>
<ul>
<li class="trends_item cf">
<a class="item_avatar fl" href="#">
<img src="images/avatar1.jpg" alt="" width="50" height="50" />
</a>
<div class="trends_content fl">
<p class="title">
<a href="#">Amy </a>发表日志：<a href="#">Bright Ocean 2010 </a>分享日志：
</p>
<div class="pictures_wrap cf">
<a href="#"><img src="images/article-thumb1.jpg" alt="" width="122" height="122" /></a>
<a href="#"><img src="images/article-thumb2.jpg" alt="" width="122" height="122" /></a>
<a href="#"><img src="images/article-thumb3.jpg" alt="" width="122" height="122" /></a>
</div>
<p class="pictures_count">共14张图片</p>
<p class="content_summary"> 2010，夏，晴，周末~~所以决定到海边走走好长时间没到深圳周边的海了今年还是第一次过来平时总说没时间，其实，时间总还是会有的，想想几个月的照片和生活...<br />
到海边走左好长时间没到深圳周边的海了.
</p>
<div class="details">
<span class="time">15: 20</span>
<span><a href="#">评论</a></span>
<span><a href="#">转发</a></span>
<span><a href="#">详情</a></span>
</div>
</div>
</li>
<li class="trends_item cf">
<a class="item_avatar fl" href="#">
<img src="images/avatar2.jpg" alt="" width="50" height="50" />
</a>
<div class="trends_content fl">
<p class="title">
<a href="#">微笑的女王 </a>“感谢今天大家的捧场…”
<span class="method">通过QQ签名</span>
</p>
<div class="details">
<span class="time">15: 20</span>
<span><a href="#">评论</a></span>
<span><a href="#">转发</a></span>
<span><a href="#">详情</a></span>
</div>
</div>
</li>
<li class="trends_item cf">
<a class="item_avatar fl" href="#">
<img src="images/avatar3.jpg" alt="" width="50" height="50" />
</a>
<div class="trends_content fl">
<p class="title">
<a href="#">Lili </a>分享日志<br /><a href="#">很齐全的孕妇小孩有帮助~~每个人都要用到的哦~~转转转</a>
</p>
<div class="details">
<span class="time">15: 20</span>
<span><a href="#">评论</a></span>
<span><a href="#">转发</a></span>
<span><a href="#">详情</a></span>
</div>
<div class="comments_wrap cf">
<ul>
<li class="cf first">
<div class="comment_avatar fl">
<img src="images/avatar-c1.jpg" alt="" width="30" height="30" />
</div>
<div class="comment fl">
<div class="comment_content">
<a href="#">小郭</a>：我懂你！！
</div>
<div class="time">
<span>09月26日 14:50</span>
</div>
</div>
</li>
<li class="cf">
<div class="comment_avatar fl">
<img src="images/avatar-c2.jpg" alt="" width="30" height="30" />
</div>
<div class="comment fl">
<div class="comment_content">
<a href="#">菰茪①嚸</a>：表示同情~~我还要段时间
</div>
<div class="time">
<span>09月26日 14:50</span>
</div>
</div>
</li>
<li class="cf">
<div class="comment_avatar fl">
<img src="images/avatar-c3.jpg" alt="" width="30" height="30" />
</div>
<div class="comment fl">
<div class="comment_content">
<a href="#">小叶</a>：真的是无奇不有啊
</div>
<div class="time">
<span>09月26日 14:50</span>
</div>
</div>
</li>
<li class="cf">
<div class="comment_avatar fl">
<img src="images/avatar-c4.jpg" alt="" width="30" height="30" />
</div>
<div class="comment fl">
<div class="comment_content">
<a href="#">水怪</a>：各位准妈妈们转起～转起
</div>
<div class="time">
<span>09月26日 14:50</span>
</div>
</div>
</li>
<li class="cf">
<div class="comment_avatar fl">
<img src="images/avatar-c5.jpg" alt="" width="30" height="30" />
</div>
<div class="comment fl">
<div class="comment_content">
<a href="#">布林</a>：我只是打酱油的
</div>
<div class="time">
<span>09月26日 14:50</span>
</div>
</div>
</li>
</ul>
<div class="comment_input_wrap">
<input id="commentInput" name="commentInput" type="text" />
</div>
</div>
</div>
</li>
<li class="trends_item cf">
<a class="item_avatar fl" href="#">
<img src="images/avatar4.jpg" alt="" width="50" height="50" />
</a>
<div class="trends_content fl">
<p class="title">
<a href="#">灰白Ray </a>转载<a href="#">疯浩子</a>的日志：<br /><a href="#">腾讯ISD 2011年校园招聘专属岗位 用户研究/交互设计/视觉设计/网...</a>
</p>
<div class="pictures_wrap cf">
<a class="fl" href="#"><span><img src="images/article-thumb.jpg" alt="" width="123" height="47" /></span></a>
</div>
<p class="pictures_count">已被分享7次 <共1张图片> </p>
<p class="content_summary">
因为选择在 1 万米的高空飞翔 , 它 , 成为了飞鹰<br />因为选择在3千万平方公里的草原奔跑,它,成为了雄狮<br />因为选择在7亿立方千米的海洋穿梭,它,成为了巨鲸<br />腾讯 ISD, ...
</p>
<div class="details">
<span class="time">15: 20</span>
<span><a href="#">评论</a></span>
<span><a href="#">分享给好友</a></span>
<span><a href="#">查看全文</a></span>
<span><a href="#">赞一个</a></span>
</div>
</div>
</li>
</ul>
<div class="trends_more_link">
查看更多动态
</div>
</div><!--end of friend_trends_wrap-->
</div><!--end of center-->
<div class="right_bar fr" id="rightBar">
<div class="access">
<div class="access_title">
<h3>谁看过我</h3>
<a href="#">我看过谁</a>
</div>
<div class="access_list">
<ul class="cf">
<li>
<img src="images/avatar-s1.jpg" alt="" width="31" height="30" />
<a href="#">Lynn</a><br />
<span class="time">今天20: 35</span>
<span class="access_manage">
<a class="manage_chat" href="#" title="聊天">聊天</a>
<a class="manage_delete" href="#" title="删除">删除</a>
</span>
</li>
<li>
<img src="images/avatar-s2.jpg" alt="" width="30" height="30" />
<a href="#">alice</a><br />
<span class="time">今天20: 35</span>
<span class="access_manage">
<a class="manage_chat" href="#" title="聊天">聊天</a>
<a class="manage_delete" href="#" title="删除">删除</a>
</span>
</li>
<li>
<img src="images/avatar-s3.jpg" alt="" width="31" height="30" />
<a href="#">布林</a><br />
<span class="time">今天20: 35</span>
<span class="access_manage">
<a class="manage_chat" href="#" title="聊天">聊天</a>
<a class="manage_delete" href="#" title="删除">删除</a>
</span>
</li>
<li>
<img src="images/avatar-s4.jpg" alt="" width="31" height="30" />
<a href="#">梨花开那夜</a><br />
<span class="time">今天20: 35</span>
<span class="access_manage">
<a class="manage_chat" href="#" title="聊天">聊天</a>
<a class="manage_delete" href="#" title="删除">删除</a>
</span>
</li>
<li>
<img src="images/avatar-s5.jpg" alt="" width="31" height="30" />
<a href="#">微笑的女王</a><br />
<span class="time">今天20: 35</span>
<span class="access_manage">
<a class="manage_chat" href="#" title="聊天">聊天</a>
<a class="manage_delete" href="#" title="删除">删除</a>
</span>
</li>
<li>
<img src="images/avatar-s6.jpg" alt="" width="31" height="31" />
<a href="#">孤光一点</a><br />
<span class="time">今天20: 35</span>
<span class="access_manage">
<a class="manage_chat" href="#" title="聊天">聊天</a>
<a class="manage_delete" href="#" title="删除">删除</a>
</span>
</li>
</ul>
</div>
</div><!--end of access-->
<div class="introduction">
<h3>可能认识的人</h3>
<ul>
<li class="cf">
<img src="images/avatar-l1.jpg" alt="" width="70" height="70" />
<div class="fl">
<a href="#">孤光一点</a><br />
<span>10个共同好友</span><br />
<span class="add_friend"><a href="#">加朋友</a></span>
</div>
</li>
<li class="cf">
<img src="images/avatar-l2.jpg" alt="" width="70" height="70" />
<div class="fl">
<a href="#">ivvan</a><span class="auth_user"></span><br />
<span>2344人喜欢</span><br />
<span class="add_like"><a href="#">喜欢</a></span>
</div>
</li>
</ul>
</div>
<div class="birthday">
<h3>最近过生日</h3>
<ul>
<li class="cf">
<img src="images/avatar-l3.jpg" alt="" width="70" height="70" />
<div class="fl">
<a href="#">雪花</a><br />
<span>9月13日三天后</span><br />
<a href="#" class="send_gift">送礼物</a>
</div>
</li>
<li class="cf">
<img src="images/avatar-l4.jpg" alt="" width="70" height="70" />
<div class="fl">
<a href="#">邹亮</a><br />
<span>9月13日三天后</span><br />
<a href="#" class="send_gift">送礼物</a>
</div>
</li>
<li class="cf">
<img src="images/avatar-l5.jpg" alt="" width="70" height="70" />
<div class="fl">
<a href="#">ivvan</a><br />
<span>9月13日三天后</span><br />
<a href="#" class="send_gift">送礼物</a>
</div>
</li>
</ul>
</div>
<div class="hot">
<h3>热门话题</h3>
<ul>
<li><a href="#">中超落幕</a><span>(13007)</span></li>
<li><a href="#">女排胜日本</a><span>(15639)</span></li>
<li><a href="#">光棍节宣言</a><span>(47443)</span></li>
<li><a href="#">MSN搬家</a><span>(73024)</span></li>
<li><a href="#">立冬</a><span>(167259)</span></li>
</ul>
</div>
</div><!--end of right_bar-->
</div><!--end of right-->
<div class="left fl">
<div class="user cf">
<img id="userAvatar" src="images/avatar.png" alt="" width="50" height="50" />
<span class="user_info fl">
<span class="name">
<a id="userName" class="name_link" href="#">CLO</a>
<a class="name_more" href="#" class="name_menu">更多</a>
</span>
<a class="edit" href="#">编辑个人档</a>
</span>
</div><!--end of user-->
<div class="trends">
<ul>
<li><a href="#">好友动态</a> </li>
<li class="trends_focus"><a href="#">我的空间动态<span class="trends_num">13</span></a> </li>
<li><a href="#">QQ群动态</a> </li>
<li><a href="#">我喜欢</a> </li>
</ul>
</div><!--end of trends-->
<div class="menu_box">
<ul>
<li class="diary"><a href="#">日志</a></li>
<li class="album"><a href="#">相册</a></li>
<li class="shuoshuo"><a href="#">说说</a></li>
<li class="share"><a href="#">分享</a></li>
<li class="vote"><a href="#">投票</a></li>
<li class="farm"><a href="#">QQ农场</a></li>
<li class="note"><a href="#">记事本</a></li>
<li class="weibo"><a href="#">微博</a></li>
<li class="music"><a href="#">QQ音乐</a></li>
<li class="gift"><a href="#">礼物</a></li>
</ul>
<div class="box_control cf">
<span class="box_more fl"><a href="#">更多</a></span>
<span class="box_manage fr"><a href="#">管理</a></span>
</div>
</div><!--end of menu_box-->
<div class="menu_box">
<ul>
<li class="auth"><a href="#">认证空间</a></li>
<li class="xiaoyou"><a href="#">QQ校友</a></li>
<li class="city"><a href="#">城市达人</a></li>
</ul>
</div><!--end of menu_box-->
</div><!--end of left-->
</div><!--end of content-->
<div class="footer">
<p>
<a href="#">iPad</a>|
<a href="#">空间首页</a>|
<a href="#">黄钻贵族</a>|
<a href="#">官方Qzone</a>|
<a href="#">腾讯博客</a>|
<a href="#">日志归档</a>|
<a href="#">腾讯客服</a>
</p>
<p> Copyright © 1998-2010 Tencent. All Rights Reserved. </p>
<p> 腾讯公司 版权所有 </p>
</div><!--end of footer-->
</div>
<!--[if IE 6]>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/DD_belatedPNG.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img, .msg_item a, .msg_num, .menu_focus, .divition, .search_button, .name_more, .diary, .album, .shuoshuo, .share, .vote, .farm, .note, .weibo, .music, .gift, .auth, .xiaoyou, .city, .box_more a, .trends_num, .add_photo, .add_media, .add_link, .manage_chat, .manage_delete, .add_friend a, .auth_user, .add_like a, .send_gift, .hot span, .right, .comments_wrap ul, .left, .menu_box, .trends, body, .search, .mood_poster, .comment_input, .access_title h3, .trends li a:hover, .trends_focus a');
$(function(){
$('.access_list li').hover(
function(){
$(this).find('.time').css('display', 'none');
$(this).find('.access_manage').css('display', 'block');
},
function(){
$(this).find('.time').css('display', 'block');
$(this).find('.access_manage').css('display', 'none');
});
});
document.execCommand("BackgroundImageCache", false, true);
</script>
<![endif]-->
</body>
</html>