应届生求职网小程序
查看: 3104|回复: 0

[面试] 迅雷 2009 页面重构工程师面试题

[复制链接]

主题

好友

7062

积分

商界领袖

发表于 2010-3-18 16:32 |显示全部楼层
需求说明:
时间日期紧跟标题其后,距离标题 10px。当标题过长时,超长部分截断,但是时间必须显示完整。
合理的结构方便程序输出。
纯 CSS 布局,兼容主流浏览器平台。
解题说明:
这道题有多种解法,能解决问题就好。
为增加解题难度,本方案无 CSS Expression,避免可能存在的资源大量消耗的情况。
为增加解题难度,本方案无定位操作,节省资源。(不过在 IE6 下需要相对定位来应付某个 bug。)
为增加解题难度,本方案实现了对超长标题进行省略号截断。(不过 IE6 和 FF3- 除外。这两个活宝,一个不支持 max-width,一个不支持省略号截断。)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www_**_org/TR/xhtml1 ... al.dtd">
<html xmlns="http://www_**_org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
/* <![CDATA[ */
* {margin:0;padding:0;}
ol,ul {list-style:none;}
a:link,a:visited {text-decoration:none;}
a:hover,a:focus,a:active {text-decoration:underline;}
.clearfix,.clear {display:inline-block;}
.clearfix,.clear {display:block;}
.clearfix:after,.clear:after {content:'';display:block;clear:both;height:0px;}
body {
  font: 12px/1.5 Arial, Helvetica, sans-serif;
  color: #666;
  background: white;
}
#dv_demo {
  margin: 0 auto;
  margin-top: 20px;
  width: 318px;
  line-height: 20px;
  border: 1px solid #fc9;
}
#dv_demo ol {
  padding-left: 23px;
  width: 14em;
  background: url(http://www_cs**ic_net/demo/2009 ... bg.png) no-repeat 2px 4px;
}
#dv_demo li {
  clear: both;
}
#dv_demo li a {
  float: left;
   _display: inline;
  max-width: 14em;
  white-space: nowrap;
  _white-space: normal;
    /*
超长就换行,第二行被裁掉 @ IE6
*/
  _height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  color: #333;
  _background: transparent;   
  /*
解决莫名占据高度bug @ IE6
*/
}
#dv_demo li span {
  _position: relative;   
  /*
应付父容器hasLayout裁切bug @ IE6
*/
  float: left; _display: inline;
  margin-right: -99px;
  padding-left: 10px;
  font-size: 10px;
  color: #999;
}
/* ]]> */
</style>
</head>
<body>
<div id="dv_demo">
  <ol class="clearfix">
    <li><a href="http://www_cs**ic_net/&quot;&gt;CSS教程大全</a><span>2008-03-14</span></li>
    <li><a href="###">最昂贵内衣惊艳出炉</a><span>2008-03-14</span></li>
    <li><a href="###">【组图】让人喷饭的日常用品大收罗</a><span>2008-03-14</span></li>
    <li><a href="###">世界上头发最长的美女令人叹为止</a><span>2008-03-14</span></li>
    <li><a href="###">世界八大最喜欢吃人的恐怖生物大全</a><span>2008-03-14</span></li>
    <li><a href="###">体育比赛中让人惊奇的瞬间</a><span>2008-03-14</span></li>
    <li><a href="###">独家新闻:虹虹顺利产下龙凤胎</a><span>2008-03-14</span></li>
    <li><a href="http://www_cs**ic_net/&quot;&gt;CSS练习题精选</a><span>2008-03-14</span></li>
    <li><a href="###">“亚洲小姐”选美</a><span>2008-03-14</span></li>
    <li><a href="http://www_cs**ic_net/&quot;&gt;Web标准与前端开发面试题</a><span>2008-03-14</span></li>
  </ol>
</div>
</body>
</html>

要使IE7,8的max-width起作用;必须申明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www_**_org/TR/xhtml1 ... al.dtd">
前一篇转载的《迅雷 2009 页面重构工程师面试题》作者的解法很好,我在他的基础上改了一下,减少了一些CSS代码,发现还是能达到题目的要求的。

<html xmlns="http://www_**_org/1999/xhtml">
    <head>
        <title>迅雷面试题</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <style type="text/css">
            ul {list-style-type:none;width:200px;line-height:20px;}
            a {max-width:14em;float:left;clear:both;white-space:nowrap;_white-space:normal;_height:18px;overflow:hidden;}
            span {margin-right:-120px;_position:relative;padding-left:10px;float:left;}
        </style>
    </head>
    <body>
    <ul>
    <li><a href="#">链接链接链接链接链接链接链接链接链接链接链接链接链接链接</a><span>2009-03-14</span></li>
    <li><a href="#">链接链接链接</a><span>2009-03-14</span></li>
    <li><a href="#">链接链接</a><span>2009-03-14</span></li>
    <li><a href="#">链接链</a><span>2009-03-14</span></li>
    </ul>
    </body>
</html>
在IE6,7,8 firefox3.5和谷歌Chrome下测试的效果完全一样。
另外,我没有做省略号的效果,因为不是所有浏览器都能支持这个效果的。
在强调一下,火狐和IE7以上版本支持max-width,而IE6不支持,所以给ul设置width:200px;再使用_white-space:normal;使长句折行,再用_height:18px;控制高度,用overflow:hidden;隐藏溢出内容。还有一个就是,_position:relative;也是为了修复IE7以下版本的Bug,在IE7以下版本,如果<a>标签和<span>标签的长度相加超过了CSS对<a>标签限制的长度,也会把超出的<span>隐藏掉。

注:要使IE7,8的max-width起作用;必须申明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www_**_org/TR/xhtml1 ... al.dtd">如果不申明,则跟IE6一样的处理方法。本文出自 51CTO_COM技术博客
+10
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册 QQ登录

本版积分规则

关闭

站长推荐上一条 /1 下一条

应届生微信小程序|应届生求职网YingJieSheng.COM ( 沪ICP备12015550号-13 )

GMT+8, 2024-2-25 06:24

Powered by Discuz!

© 2001-2012 Comsenz Inc.

快速回复 返回顶部 返回列表