来的迅雷面试题（网页布局）

      这是今天在网上看到的迅雷面试题及答案，转载到此分享，并让自己时刻学习：原URL：http://topic.csdn.net/u/20091009/11/179bf6c0-437d-4875-b03b-d11211e69779.html?92394

 

 

第一题的答案

 

  <! 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 >fenye(wwww.hemin.cn) </ title >
< style  type ="text/css" >
* {  margin : 0 ;  padding : 0 ;  font-size : 12px ;  font-family : "新宋体" ; }
div {  text-align : center ; }
div a {  display : inline-block ;  background : url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat left top ;  text-decoration : none ;  padding-left : 8px ;  color : #FFF ; }
div a:hover {  background : url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat left -24px ;  color : #000 ; }
div a span { display : inline-block ;  background : url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat right top ; height : 24px ; line-height : 24px ; padding-right : 8px ;  cursor : pointer ; }
div a:hover span {  background : url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat right -24px ; }
</ style >
</ head >
< body >
< div >
     < a  href ="#" >< span >上一页 </ span ></ a >
     < a  href ="#" >< span >11 </ span ></ a >
     < a  href ="#" >< span >2 </ span ></ a >
     < a  href ="#" >< span >33333 </ span ></ a >
     < a  href ="#" >< span >下一页 </ span ></ a >
</ div >
</ body >
</ html >

 

 

第二道题

 

  <! 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 >三栏等高(wwww.hemin.cn) </ title >
< style  type ="text/css" >
* {  margin : 0 ;  padding : 0 ;  font-size : 18px ;  font-family : "新宋体" ; }
body  { min-width :  850px ; width : expression((documentElement.clientWidth < 850) ? "850px" : "auto" ) ;   }
.Top { background : #999 ;  height : 100px ; }
.Middle,.Left,.Right {  float : left ; padding-bottom :  32767px ; margin-bottom : -32767px ; }
.Content {  overflow : hidden ; padding : 0 250px 0 300px ;  zoom : 1 ; position : relative ; }
.Middle { background : #090 ; width : 100% ; }
.Left { background : #333 ; width : 300px ; margin-left : -100% ;  position : relative ;  right : 300px ; _left : 250px ; }
.Right { background : #666 ; width : 250px ; margin-right : -100% ; }
</ style >
</ head >
< body >
< div  class ="Top" >顶部 </ div >
< div  class ="Content" >
     < div  class ="Middle" >中间 </ div >
     < div  class ="Left" >左边 </ div >
     < div  class ="Right" >右边 < br  />< br  />< br  /></ div >
</ div >
</ 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;
二种是边框实现
三种是图片实现