练习迅雷面试题

设置字体: 小中大

今天下午闲着在蓝色理想里面逛了下，看见迅雷面试题，感觉大家都做得不理想，我就打算练习练习一下。
详细题目
http://www.hemin.cn/demo/xunleiMS09-6-21/q.png

第一题（修正图片和ol）

<!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>list(wwww.hemin.cn)</title> <style type="text/css"> *{ margin:0; padding:0; font-size:12px; font-family:"新宋体";} ol{ background:url(http://www.hemin.cn/blog/wp-content/uploads/2009/06/list.jpg) no-repeat left -2px;} li{position:relative; padding-left:20px; height:20px; overflow:hidden; line-height:20px; width:250px; list-style:none;padding-right:60px;} li a{ display:inline-block; text-decoration:none; color:#000;} li a:hover{ text-decoration:underline;} li span{ position:absolute; padding-left:5px; color:#CCC;} </style> </head> <body> <ol> <li><a href="#">杂技团美女演员的训练</a>2009-6-21</li> <li><a href="#">杂技团美女演员的1训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练</a>2009-6-21</li> <li><a href="#">杂技团美女演员的训1练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练</a>2009-6-21</li> <li><a href="#">杂技团美女演员2的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练</a>2009-6-21</li> <li><a href="#">练演员的训练</a>2009-6-21</li> <li><a href="#">练演员的训演员的训练</a>2009-6-21</li> <li><a href="#">练演员的训练演员的训练练</a>2009-6-21</li> <li><a href="#">练演员的练</a>2009-6-21</li> <li><a href="#">练演员的训练</a>2009-6-21</li> </ol> </body> </html>

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

第二题

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

第三题

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

测试的浏览器：IE6,7,8,FF3，Opera10.（FF2不支持display:inline-block; ，没有安装FF2所以没有测试）

自我感觉第一题不错。二题就是滑动门而已，3题用了expression不理想。

超过宽度显示省略号:http://www.hemin.cn/blog/?p=339

另外：三栏等高暂时只有三种实现还可以的方法
一种是padding-bottom: 32767px;margin-bottom:-32767px;
二种是边框实现
三种是图片实现

六月 21st, 2009 in (x)Html/Css | tags: 实例, 面试题 | 4,104 次浏览

19 Comments

丸子... 说：

2009/06/22于1:15 下午

其实第三题…用补丁的方法是不被推荐的….我曾跟pr和小志讨论过…最终接受了他们的建议…用js…用js还有一个好处..除了题目想要知道的你的css水平….还可以顺便体现.你至少是会写js的…
有用(0) 没用(0)

[回复]
冰剑说：

2009/06/22于1:50 下午

第一题 em建议加上font-size:10px;font-weight:blod;
因为文字加粗会好点，呵呵。字号弄成10px，这样如果列表到10的话，数字也不会太大！
第二题滑动门，没啥说的！好像也可以11这样吧！
有用(1) 没用(0)

[回复]
unicac 说：

2009/06/28于12:00 上午

ol………..
有用(0) 没用(1)

[回复]
Luke 说：

2009/07/02于11:08 下午

学习了！

等待更新
有用(1) 没用(0)

[回复]
无悠阁说：

2009/07/20于12:46 下午

学习了！
有用(0) 没用(1)

[回复]
lx 说：

2009/08/09于5:14 下午

第一题，在FF下，LI的内容太长的话，日期会不见得！
有用(0) 没用(0)

[回复]
rekey 说：

2009/08/09于7:19 下午

1.看样子就是有序列表了。你要要用ul模拟不用ol。不知道为什么
2.题目要求了要兼容FF2.x 你用 display:inline-block; 怎么能兼容？
3.如果你只把考题当考题那当然没话说。如果不是的话好好处理width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" ); 要做到最小宽度不一定需要用这个东西
有用(1) 没用(0)

[回复]
hemin 说：

2009/08/12于5:13 下午

@rekey ,@unicac
你确定如果策划要你显示15条数据或者20条，难道去修改图片？我的这个不需要。随便程序员显示多少条！
还有你确定ol默认的序号旁边那个点可以去掉？

其实3题：我建议用JS实现。这样也可以让面试官知道你会JS。
有用(0) 没用(0)

[回复]
lba8610 说：

2009/10/09于10:45 上午

第一题有错误
题目是说时间与标题间距10px
当然你也给li span{padding-left:5px;} 看上去是10px；
但如将中文标题换成是全数字就看不到10px 效果
有用(0) 没用(0)

[回复]
liuyiru 说：

2009/10/09于5:11 下午

学习了。。。强大啊
有用(0) 没用(0)

[回复]
Vanessa 说：

2009/10/13于6:54 下午

第三题结合css的position
http://blog.csdn.net/Vanessa219/archive/2009/09/17/4564075.aspx
有用(0) 没用(0)

[回复]
dreamway21 说：

2009/10/30于8:40 上午

要懂得js和css的完美结合!
有用(0) 没用(0)

[回复]
wd 说：

2009/12/16于5:25 下午

还有这样的
有用(0) 没用(0)

[回复]
edielei 说：

2010/01/07于12:55 上午

无语，原来是你，在CSDN看到的。和你还有点缘分啊。呵呵。
你代码还有点冗余！
有用(0) 没用(0)

[回复]
hemin 回复:
一月 7th, 2010 at 3:34 下午
@edielei, 呵呵，有缘的话就多多关注，多多交流哦。
有用(0) 没用(0)

[回复]
linksjuy 说：

2010/01/12于4:22 下午

不太懂，学的 Dreamweaver
有用(0) 没用(0)

[回复]
susan 说：

2010/02/06于3:12 下午

还要学会些代码？
有用(0) 没用(0)

[回复]
christian louboutin 说：

2010/03/12于4:05 下午

真是雷锋的传人啊
有用(0) 没用(0)

[回复]
wholesale 说：

2010/03/28于10:27 下午

看得有点晕，不太懂
有用(0) 没用(0)

[回复]