腾讯Q组内部考核题

设置字体: 小中大

这个题目是一个网友树人发给我的，听说他是问鬼哥要的，我打开看了看，原来是以前看见过的，只是没有做，本来打算计划这周不加班，周五晚上开始做这个试题，结果突然来了项目要做，没都办法周六得去加班啊，周五晚上也加了的。昨天晚上我就用了几个小时，今天中午起来吃了个面包就继续，搞了一下午终于搞出来了。话说这道题是以前我做过的面试题的综合而已，不过里面有很多值得学习的地方，绝对值得大家一做。

详细题目：
http://www.hemin.cn/demo/tengxunMS10-01-17/考核题关注.doc
http://www.hemin.cn/demo/tengxunMS10-01-17/q_group.psd

答案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>腾讯Q组内部考核题(www.hemin.cn/blog)</title> <link rel="stylesheet" href="http://www.hemin.cn/demo/tengxunMS10-01-17/styles/main.css" type="text/css" /> </head> <body> <div id="header"> <div class="top"> <div class="fl"><a class="logo" href="#" target="_blank" title="logo"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/logo.jpg" width="61" height="21" alt="logo" /></a> <a class="home" href="#" target="_blank" title="首页">首页</a><a class="help" href="#" target="_blank" title="帮助">帮助</a> <a class="join-crowd" href="#" target="_blank" title="我加入的群">我加入的群</a></div> <div class="fr"><a href="#" target="_blank" title="退出登录">退出登录</a></div> </div> <div class="top-title"> <a class="q-logo" href="#" target="_blank" title="">群logo</a> <h1>爱生活爱hemin</h1> <p><strong>[广东省]</strong>爱生活爱hemin爱生活爱hemin爱生活爱hemin爱生活爱hemin</p> </div> <div class="login-inf"> <div class="fl"><a class="picture" href="#" ><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></a><span>飘飘</span><span>创建于</span><span>2003.12.12</span></div> <div class="fr"><a class="management" href="#" title="群空间管理">群空间管理</a></div> </div> </div> <div id="main"> <div class="part_c"> <div class="c-top"> <div class="fl"> <img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ad.jpg" width="180" height="110" alt="" /></div> <h5>群内公告</h5> <p>为了她，我已经爱上了hemin,为了她，我已经爱上了hemin,为了她，我已经爱上了hemin,为了她，我已经爱上了hemin,为了她，我已经爱上了hemin,</p> </div> <div class="c-bottom"> <div class="c-title"><strong class="fl">群空间论坛</strong><a class="fr" href="#" title="">发帖</a></div> <table width="100%" border="0"> <tr> <th class="pl-27 title">文章标题</th> <th class="author" >作者</th> <th class="time">时间</th> <th class="reply" >浏览/回复</th> </tr> <tr> <td class="pl-27">[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <td class="pl-27">[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <td class="pl-27"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/player.jpg" width="13" height="13" />[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <td class="pl-27">[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <td class="pl-27">[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <td class="pl-27">[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <td class="pl-27">[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <td class="pl-27">[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <td class="pl-27">[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <td class="pl-27">[<a class="title" href="#" title="通知版">通知版</a>]<a href="#" title="为了她，我已经爱上了hemin,">为了她，我已经爱上了hemin,</a></td> <td><span class="picture"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><a href="#" title="hemin">hemin</a></td> <td>01.31 13.45</td> <td class="tc">10/0</td> </tr> <tr> <th colspan="4" class="bor-t"><a class="more" href="#" target="_blank" title="更多">更多>></a> </th> </tr> </table> </div> </div> <div class="part_l"> <div class="group-info"> <dl> <dt><strong>普通群</strong>[<span>非公开</span>]</dt> <dd><span class="name">群成员数</span><em>87/100人</em></dd> <dd><span class="name">相册空间</span> <div class="loadbar"><span class="bar"><strong style="width:0%"> </strong></span></div> <em>0/10M</em></dd> <dd><span class="name">硬盘空间</span> <div class="loadbar"><span class="bar"><strong style="width:100%"> </strong></span></div> <em>10/16M</em></dd> </dl> <a class="upgrade" href="#" title="升级">升级</a> </div> <div class="menu"> <ul class="menu-list"> <li> <h3 class="home"><a href="#" title="首页">首页</a></h3> </li> <li> <h3 class="bbs"><a href="#" title="论坛">论坛</a></h3> <ul class="bbs-list"> <li><a href="#" title="讨论版">讨论版</a></li> <li><a href="#" title="贴图版">贴图版</a></li> <li><a href="#" title="随写">随写</a></li> <li><a href="#" title="分享">分享</a></li> </ul> </li> <li> <h3 class="album"><a href="#" title="相册">相册</a></h3> </li> <li> <h3 class="record"><a href="#" title="群聊天记录">群聊天记录</a></h3> </li> <li class="mb0"> <h3 class="members"><a href="#" title="群成员">群成员</a></h3> </li> </ul> </div> </div> <div class="part_r"> <div class="r-top"> <div class="result"> <a class="to-result" href="#" title="我要给群里充值">我要给群里充值</a> <a class="plan" href="#" title="群返利计划">群返利计划</a> </div> </div> <div class="r-bottom"> <div class="members-list"> <h6>成员列表</h6> <ul> <li class="leading"><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱生活爱hemin爱爱</a></span></li> <li class="assistant"><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱生活爱hemin</a></span></li> <li class="assistant"><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱生活爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> <li><span class="fl"><img src="http://www.hemin.cn/demo/tengxunMS10-01-17/images/ico-02.gif" width="16" height="16" alt="" /></span><span class="fr"><a href="#" title="分享">我爱hemin</a></span></li> </ul> <a class="more" href="#" target="_blank" title="更多">更多>></a> </div> </div> </div> </div> <div id="footer"> <p class="link"><a href="#" target="_blank" title="关于腾讯">关于腾讯</a><a href="#" target="_blank" title="About">About</a><a href="#" target="_blank" title="Tencent">Tencent</a><a href="#" target="_blank" title="服务条款">服务条款</a><a href="#" target="_blank" title="广告服务">广告服务</a><a href="#" target="_blank" title="腾讯招聘">腾讯招聘</a><a href="#" target="_blank" title="客服中心">客服中心</a><a href="#" target="_blank" title="网站导航">网站导航</a></p> <p class="copyright">Copyright © 1998 - 2008 Tencent Inc. All Rights Reserved</p> <p>腾讯公司版权所有腾讯网络文化经营许可证</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

测试：IE6,7.8,FF3.6.op10,chrome

一月 17th, 2010 in (x)Html/Css | tags: css, 面试题 | 1,942 次浏览

12 Comments

修远兮说：

2010/01/17于9:08 下午

收藏，回去慢慢做。
有用(0) 没用(0)

[回复]
snomy 说：

2010/01/17于9:29 下午

回去我也慢慢做
有用(0) 没用(0)

[回复]
筱白说：

2010/01/18于10:06 上午

目前还不会做，仔细研究下。。
有用(0) 没用(0)

[回复]
weilaixu 说：

2010/01/18于10:09 上午

既然来了，就留个脚印吧！
有用(0) 没用(0)

[回复]
lazyboy 说：

2010/01/20于6:29 下午

“加“…”的地方，考虑过长溢出省略处理”　这个要求好像没实现？！
有用(0) 没用(0)

[回复]
vapour 说：

2010/01/21于8:19 上午

不错，
有用(0) 没用(0)

[回复]
tommyfan 说：

2010/02/05于12:05 上午

有考虑试题外泄的问题吗？
有用(0) 没用(0)

[回复]
hemin 回复:
二月 5th, 2010 at 10:50 上午
纯粹为广大页面重构人士参考学习交流。
有用(0) 没用(0)

[回复]
小繁说：

2010/02/23于8:54 下午

既然来了,那我就留个脚印吧
有用(0) 没用(0)

[回复]
小繁的Blog » 腾讯Q组内部考核题说：

2010/03/03于12:13 上午

[...] 这个是从Hemin那里看到的,我没找鬼哥要,也没见过,就拿来练手了.题目的综合性还是比较大. [...]
有用(0) 没用(0)
飘飘说：

2010/05/05于1:40 下午

有些事，有可为，有不可为，不想多评论什么。

很顶交流，但方式有些欠缺
有用(0) 没用(0)

[回复]
linxz 说：

2010/05/05于1:42 下午

来了就留个脚印，其实我很欣赏国人的分享精神。
但似乎分享的方式存在着一些误区。
有用(0) 没用(0)

[回复]