好好学习，俺也做做面试题

2009年7月20日 | 标签: web标准, 面试题, 页面制作

今天在蓝色家园里，有朋友发了一道关于前端开发的面试题，具体见豆豆猫的《招聘，考试，结构化[1]》。俺看了下，觉得挺有意思，顺便也练练手，就抽时间做了下，根据自己的理解完成了三道题，但不知道与他心目中的完美答案还差多远？下面就将我的答案呈上，有兴趣的朋友欢迎积极讨论。

第一题：

第一题

第一题答案：

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

点击查看效果：demo演示

第二题：

第二题
做了小修改，整体宽度是675px，我觉得这样比较合理。

第二题答案：

<!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>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id="photoAlbum"> <h2>相册列表</h2> <div class="photo_operate"> <span><a href="#">新建相册</a> | <a href="#">批量管理</a></span> <div class="photo_search"> <form name="form1" action="#" method="post"> <label><input name="keyword" type="text" class="input_text" /></label> <input name="search" type="submit" value="搜索" class="input_bottom" /> </form> </div> </div> <ul class="photo_lists clearfix">  <li> <dl class="photo_info"> <dt><a href="#">网动中国</a></dt> <dd><a href="#"><img src="http://www.hzhjun.cn/upload/demo/test/images/pic.jpg" alt="照片封面" title="照片封面" /></a></dd> <dd>说明：2008网动中国</dd> <dd>数量：5张</dd> <dd>时间：2009-5-1创建</dd> </dl> <ul> <li><a href="#">查看相册</a></li> <li><a href="#">添加照片</a></li> </ul> </li>  <li> <dl class="photo_info"> <dt><a href="#">网动中国</a></dt> <dd><a href="#"><img src="http://www.hzhjun.cn/upload/demo/test/images/pic.jpg" alt="照片封面" title="照片封面" /></a></dd> <dd>说明：2008网动中国</dd> <dd>数量：5张</dd> <dd>时间：2009-5-1创建</dd> </dl> <ul> <li><a href="#">查看相册</a></li> <li><a href="#">添加照片</a></li> </ul> </li> <li> <dl class="photo_info"> <dt><a href="#">网动中国</a></dt> <dd><a href="#"><img src="http://www.hzhjun.cn/upload/demo/test/images/pic.jpg" alt="照片封面" title="照片封面" /></a></dd> <dd>说明：2008网动中国</dd> <dd>数量：5张</dd> <dd>时间：2009-5-1创建</dd> </dl> <ul> <li><a href="#">查看相册</a></li> <li><a href="#">添加照片</a></li> </ul> </li> <li> <dl class="photo_info"> <dt><a href="#">网动中国</a></dt> <dd><a href="#"><img src="http://www.hzhjun.cn/upload/demo/test/images/pic.jpg" alt="照片封面" title="照片封面" /></a></dd> <dd>说明：2008网动中国</dd> <dd>数量：5张</dd> <dd>时间：2009-5-1创建</dd> </dl> <ul> <li><a href="#">查看相册</a></li> <li><a href="#">添加照片</a></li> </ul> </li> </ul> </div> </body> </html>

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

点击查看效果：demo演示

第三题：

第三题

第三题答案：

第三题

详细说明如下：

1、所有标签的元素和属性的名称都必须小写；
2、给所有的属性都赋一个值；
3、所有的属性值都必须用引号“”括起来；
4、所有的标记都必须有一个相应的结束标签；
5、所有的标签都应该合理的嵌套；

暂时只找到以上几点错误，欢迎朋友们指正。

发表评论 | Trackback

江西人事考试网

2011年10月26日10:09

回复 | 引用 | #1

这是咋的
修远兮

2010年8月3日19:43

回复 | 引用 | #2

搜前端开发面试题跑到这里来了。
默小土

2010年5月2日13:39

回复 | 引用 | #3

新手，学习了。
只有第三题好做出标准答案，第一二是只有更好~
- hzhjun
  
  2010年5月4日15:09
  
  回复 | 引用 | #4
  
  确实是，每个人理解的都可能不同，以后多交流啊~
alan

2010年1月16日17:54

回复 | 引用 | #5

看了您的文章，感觉受益匪浅。
发现一个问题。
上面第一题中，用绝对定位是种不错的办法，但如果两边的高度大于中间的高度时有什么问题，页脚没有被撑下去！
- hzhjun
  
  2010年1月19日15:00
  
  回复 | 引用 | #6
  
  嗯，这确实是个问题，多谢朋友提醒，我再想个方法！
卢松松

2009年7月21日15:22

回复 | 引用 | #7

这个教程就比较专业了！

hzhjun 于 2009-7-21 20:59:31 回复

恩，出题者考虑的比较全面！
豆猫

2009年7月20日23:17

回复 | 引用 | #8

hoho，我还是那句话，页面的结构化没有唯一的答案，更没有完美的答案，很多情况下，实际的应用也不给我们完美构建机会。今天，朋友公司招聘的新人正式上班了，就是那个最后一题基本正确的家伙。当然，以后他的路还很长，我们也都一样。

hzhjun 于 2009-7-21 9:28:46 回复

嗯，做这个职位的需要的是共同提高，提高自己在整个团队、整个公司、整个行业的影响力；没有谁高谁低，只有不断努力！