前端工程师
下午要面试一个前端工程师，想了半天不知道出些什么样的题目，除了基础知识的应用，猫嗔觉得还应该考察一下前端对于没有遇到的问题的解决能力。于是上网想搜罗一些复杂而又不常见的题目。（其实面试的时候一下子解决不了问题没关系，因为大家自己做事的时候也知道，不过多n的人，都有可能需要google的时候，关键是看在解决问题中运用的基础知识方向是否正确和处理的方法。）
最终确定的题目就不多说了，但是在搜索中我觉得几个大家广为流传的面试题真的是很不错的，这里整理贴出，算是给去面试的朋友们一个参考。同时也想说，这几个面试题真的也是看基础是不是扎实了。
第一个是迅雷的面试题：
请用css实现下列要求的效果：
1.一个列表包含标题和时间
2.列表宽度固定，高度自由设置
3.时间紧跟标题，但标题过长时需要隐藏。
<!-- ul{list-style:none;} #t1{float:left;overflow:hidden;height:24px; font-size:12px;} ul li{overflow:hidden;line-height:24px;width:200px;} .date{padding-left:10px; font-size:12px; color:#ccc;line-height:24px; position:absolute;} --> <ul> <li> <div id="t1"><a href="#">世界上头发最长的美女</a></div> <span class="date">2009-06-16</span></li> <li> <div id="t1"><a href="#">世界上头美女</a></div> <span class="date">2009-06-16</span></li> <li> <div id="t1"><a href="#">世界上头发最长的世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美美女</a></div> <span class="date">2009-06-16</span></li> <li> <div id="t1"><a href="#">世界上头发最长的美女</a></div> <span class="date">2009-06-16</span></li> <li> <div id="t1"><a href="#">世界上头发最长的美女</a></div> <span class="date">2009-06-16</span></li> <li> <div id="t1"><a href="#">世界上头发最长的美女</a></div> <span class="date">2009-06-16</span></li> <li> <div id="t1"><a href="#">世界上头美女</a></div> <span class="date">2009-06-16</span></li> <li> <div id="t1"><a href="#">世界上头发最长的世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美美女</a></div> <span class="date">2009-06-16</span></li> <li> <div id="t1"><a href="#">世界上头发最长的美女</a></div> <span class="date">2009-06-16</span></li> <li> <div id="t1"><a href="#">世界上头发最长的美女</a></div> <span class="date">2009-06-16</span></li> </ul>
<!-- ul, li {margin:0;padding:0;list-style:none;} ul {float:left; background:#CCC; width:300px;} li {font-size:12px;line-height:1.5em;padding-left:10px;position:relative;height:20px;overflow:hidden;padding-right:65px;} li a {position:relative;left:0px;height:20px;float:left;text-decoration:none;} span {position:absolute;top:0px;right:-65px;} --> <ul> <li><a href="#">天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场<span>2008-08-27</span> </a></li> <li><a href="#">天空一声巨响，超越闪亮全场<span>2008-08-27</span></a></li> <li><a href="#">天空一声巨响，闪亮全场空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场<span>2008-08-27</span></a></li> <li><a href="#">天空一声巨响，超越闪亮全场<span>2008-08-27</span></a></li> <li><a href="#">天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场<span>2008-08-27</span></a></li> <li><a href="#">哈哈哈哈哈哈<span>2008-08-27</span></a></li> <li><a href="#">哈哈哈哈哈哈哈哈哈<span>2008-08-27</span></a></li> <li><a href="#">天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场哈哈哈哈<span>2008-08-27</span></a></li> <li><a href="#">哈哈哈哈哈哈哈哈哈哈<span>2008-08-27</span></a></li> <li><a href="#">天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场哈哈哈哈哈哈哈哈<span>2008-08-27</span></a></li> </ul>
<!-- *{margin:0;padding:0;} #muem ul{background:#FFC;width:310px;} #muem ul li{margin:5px;height:30px;line-height:30px;text-align:left;list-style:none;width:300px;overflow:hidden;display:inline-block;} #muem ul li a{font-size:12px;float:left;padding-right:60px;} #muem ul li span{color:#CCCCCC; font-family:Tahoma, Geneva, sans-serif; font-size:12px;display:inline-block;float:left;margin-left:-50px;} --> <div> <div id="muem"> <ul> <li><a>杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练</a><span>2008-07-14</span></li> <li><a>最昂贵内衣惊艳出炉</a><span>2008-07-14</span></li> <li><a>[组图]让人喷饭的日喷饭的日</a><span>2008-07-14</span></li> <li><a>世界上头发最长的美女：人惊奇的</a><span>2008-07-14</span></li> <li><a>世界八大最喜欢吃人的的虹顺利产</a><span>2008-07-14</span></li> <li><a>亿万富翁的超级奢侈</a><span>2008-07-14</span></li> <li><a>日本小姐选美</a><span>2008-07-14</span></li> <li><a>素面朝天吓坏人，化妆虹顺利产</a><span>2008-07-14</span></li> </ul> </div> </div>
可以面试前端工程师，你一定很厉害呀