超越起点 追随自由

我看不见，我的明天，但今天，绝不重复昨天；顺风是滑翔，逆风才是飞翔，火烧过才能化凤凰！
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  294 随笔 :: 16 文章 :: 1119 评论 :: 24 Trackbacks
爆牙齿的Web标准面试考题。

最近需要招聘Web标准设计师。真头疼啊，招不到人。

今天认真想了想，做了个技术考题，题目见下图，有兴趣可以试试看。时间匆忙，还有很多考点都还没写进去。慢慢升级好了，呵呵。

我不给出xhtml，那样的话就把范围缩小了，就不叫Web标准考题了，叫CSS考题了。还有JS部分，以后有时间再增加上。

最后一句：没有标准答案，^_^

重新上了一下图，改了一些文字上的错误。

posted on 2006-07-11 11:59 爆牙齿 阅读(3527) 评论(33)  编辑 收藏 所属分类: 4、奋斗

评论

#1楼  2006-07-11 13:26 ChuPaChuPs [未注册用户]
栏目二呢
  回复  引用    

#2楼  2006-07-11 14:51 TMD [未注册用户]
TMD也 太牛B了把，你跟别人多少钱工资。。。怪不得招不到人，，想剥削人把。。。活该呢
  回复  引用    

#3楼  2006-07-11 15:05 didasoft      
看不到图.....
  回复  引用  查看    

#4楼  2006-07-11 15:31 笑望人生      
很简单啊，三个大div，分别表示页面头，页面内容和页脚。
中间的那个div再分成三个div，分别表示左中右三部分。
中间的那个再分成三个小div，每个div中间的内容加上
<ul><li>内容</li></ul>就可以了。

设置div的宽度也简单，简单的js代码
比如说设置页面头部的代码：
首先获取那个div的引用，假设id名为PageHeader：
var ph = document.getElementById("PageHeader");

然后判断是否使用居中

if(判断居中的条件)
ph.style.width = "700px";
else
ph.style.width = "100%"; // 设定宽度为100%

另外关于显示器分辨率的问题我喜欢用这个代码判断

if(window.screen.width == 1024) // 1024 * 768 标准17'显示器
{
// 设定宽度等代码
}
if(window.screen.width == 800) // 800 * 600 15'显示器
{
// ...
}
if(window.screen.width == 640) // 14'显示器
{
// ..
}

根据我的测试，如果要仿微软那样的满屏幕网页，必须执行这样的大量判断操作。而且不但要执行标准的操作，高分辨率的判断也要进行，如一些14',15'的16比9的宽屏笔记本显示器许多分辨率都不一样，尤其是宽度设定为百分比的时候，要进行大量的判断与测试。
  回复  引用  查看    

#5楼  2006-07-11 15:34 onekey      
对XHTML不熟悉，不知这样招到的是不是牛人。
  回复  引用  查看    

#6楼  2006-07-11 15:38 onekey      
@笑望人生：
是放三个table吧？div回有问题的
  回复  引用  查看    

#7楼  2006-07-11 15:53 笑望人生      
@onekey
Web标准中规定，除了显示列表数据，在设置页面结构的时候，是不允许使用table来确定页面结构的。

我上面有一个问题说错了，实际上贴主给的结构，栏目二到栏目四，只需要一个
<ul>里面带三个<li>就可以了。

  回复  引用  查看    

#8楼 [楼主] 2006-07-11 15:53 爆牙齿      
@笑望人生
谢谢你的思考和回复。
我允许自己写xhtml就毫无难度，所以也就没有标准答案，想达到的效果只是看看被面试者考虑问题的深度。不论是在写结构方面（标记的理解和选用、结构的划分）还是写样式方面，还有JS控制方面。
^_^
  回复  引用  查看    

#9楼  2006-07-11 16:35 Goodspeed      
页面居中时和页面自适应时是什么意思,不明白.

是不是说的min-width
  回复  引用  查看    

#10楼  2006-07-11 16:47 xwxw [未注册用户]
图片让你改了最开始你贴的那个尺寸有问题
  回复  引用    

#11楼  2006-07-11 16:47 dida learning asp.net      
一个色块就是一个<div></div>,里面的就通过<ul><li></li></ul>实现

所有的排版都是由css控制！

另外：这样的版面估计不用js都可以排适合全屏的，


  回复  引用  查看    

#12楼  2006-07-11 17:03 维生素C.NET      
我一直用在http://www.jluvip.com/blog/article.asp?id=151这上面的方法来做3列布局的页面.
用div布局确实不那么容易,margin,padding啥的我一般都不设置,ie5是宽度计算上的一个分水岭,加之各种浏览器的兼容性,div内的具体内容还是嵌套div或其他容器控件实现.
对于笑望人生的<li>方式,我觉得似乎不妥,<ul>里不是什么都可以嵌套的,考虑到内容的语义问题,所以会有这种观点.
还有就是似乎不用那样的js就能排出分辨率的问题,多从css(/css2)上考虑也可以实现出来.
水平有限,一点拙见.
  回复  引用  查看    

#13楼 [楼主] 2006-07-11 17:05 爆牙齿      
@Goodspeed
居中怎么做？自适应又怎么做？能不能一起解决？
其实这个也是考虑问题全面性的一面，还有很多方面我都没有说。
我希望能自己考虑进去。^_^

@xwxw
是啊是啊，所以赶快改了，不好意思（吐舌头）。

@dida learning asp.net
试试看
  回复  引用  查看    

#14楼  2006-07-11 17:15 xwxw [未注册用户]
好了好了都光说不练，俺就写了一个框架，内容没有填￣￣￣哈哈


<!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>
<title>爆牙齿的Web标准面试考题。</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Design Corp" content="www.d8in.com" />
<meta name="Designer" content="xw" />
<meta name="Designer mail" content="xwxwxw(at)gmail.com" />
<meta name="robots" content="all" />
<meta name="Keywords" content="web标准" />
<meta name="Description" content="爆牙齿的Web标准面试考题" />
<style type="text/css">
body{
margin: 0;
padding: 0;
}
/*
--------------------------------------------------------*/
#wapper{
min-width: 880px;
width: expression((documentElement.clientWidth < 880) ? "880px" : "auto" );
height: 1px;
}
#header{
background-color: #0099CC;

}
#main{
height: 300px;
position: relative;
top: 0px;
left: 0px;
}
#main .left,
#main .right{
width: 120px;
height: 300px;
position: absolute;
top: 0;
}
#main .left{
background-color: #FF9900;
left: 0px;
}
#main .right{
background-color: #FFFF00;
right: 0;
}

#main .middle{
height: 300px;
margin: 0 120px 0 120px;
}
#main .middle .row1{
background-color: #990000;
}
#main .middle .row2{
background-color: #003399;
}

#footer{
clear: both;
background-color: #009966;
}
/*
--------------------------------------------------------*/
.height100,
#header,
#footer,
#main .middle .row1,
#main .middle .row2{
height: 100px;
}

.fLeft{
float: left;
}
.fRight{
float: right;
}
</style>
</head>
<body>
<!-- page=go -->
<div id="wapper">
<!-- header=go -->
<div id="header">www.d8in.com</div>
<!-- header=end -->
<!-- main=go -->
<div id="main">
<div class="left">www.d8in.com</div>
<div class="middle">
<div class="row1">www.d8in.com</div>
<div class="row2">www.d8in.com</div>
<div class="row1">www.d8in.com</div>
</div>
<div class="right">www.d8in.com</div>
</div>
<!-- main=end -->
<!-- footer=go -->
<div id="footer">www.d8in.com</div>
<!-- footer=end -->
</div>
<!-- page=end-->
</body>
</html>
  回复  引用    

#15楼  2006-07-11 17:47 横刀天笑      
Web标准宣传的是 内容，显示结构，行为 三个独立
用html表示内容
CSS控制显示的结构
JS控制行为
我觉得这个好像是借用了面向对象编程的某些思想
LZ这个题目我觉得没有完全考到Web标准的思想
  回复  引用  查看    

#16楼  2006-07-11 20:17 zhzkl      
宽度加上自适应

楼主的意思是不是要判断浏览器宽度
难道直接用
Top
{
width: 100%;
background-color: BLUE;
}
不可以吗?

我考虑的太简单了 哪里会有错呢?
  回复  引用  查看    

#17楼  2006-07-11 23:05 GoKu [未注册用户]
简单的css布局还会,考虑太多就做不出来了,哈
  回复  引用    

#18楼  2006-07-11 23:53 畅想自由      
不需要js，以下的内容在ie6.0上测试通过，完全自适应。在800*600和1024*768上显示正确。但在firefox上由于中部没有填写内容，会被隐藏。
不足之处，还望多多拍砖。
//代码如下：

<!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="Pragma" content="no-cache" />
<!--CharSet-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>hello world!</title>

<style type ="text/css" >
body
{padding:0px;margin:0px 0px 0px 0px;width:100%;height:100%;}
.header
{
width:100%;
margin-right: auto;
margin-left: auto;
background: #0099cc;

}
#contain
{
margin-right: auto;
margin-left: auto;
width: 100%;
}

#mainbg
{
width:100%;
padding: 0px;
background: #EEE;
float: left;
}

#left
{
float: left;
overflow:auto ;
background:#ff9900;
height :300px;
width:120px;

}

#middle
{ float:left;
overflow :auto ;
background: #FFFFFF;

}

.middle_contents
{

font-family:arial;font-size:10pt;
width:100%;
height:100px;

}

#right
{
float:right;
overflow:auto;
width:120px;
height:300px;
background:#ff0000;

}
.footer
{
clear:both;
width:100%;
height:100px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #0099cc;

}


</style>

</head>
<body>

<div class ="header" style="width:100%;height:100px;"></div>

<div id="contain">
<div id="mainbg">
<div id="right"></div>

<div id="left"></div>
<div id="middle">

<div class="middle_contents" style="background-color:#990000;"></div>

<div class="middle_contents" style="background-color:#003399;"></div>

<div class="middle_contents" style="background-color:#990000;"></div>

</div>


</div>

<div class="footer" ></div>

</div>


</body>
</html>

  回复  引用  查看    

#19楼  2006-07-12 08:38 垃圾猪      
这也他妈的太简单了吧，这种题有没有搞错！
没入门的可能感觉很难，这是WEB标准的最低级最低级应该掌握的技能
  回复  引用  查看    

#20楼  2006-07-12 09:15 Ivan      
会做这种题后,薪金好多啊?招民工,还是招设计师哦
  回复  引用  查看    

#21楼  2006-07-12 09:57 无聊 [未注册用户]
程序员搞什么这种东西，美工的事，没意思，好像楼主很在意，你再有多么标准也不见得显示速度能快多少！没啥意义！！
  回复  引用    

#22楼  2006-07-12 13:40 yok. [未注册用户]
@无聊
一个有水平的coder花个把月就能熟悉xhtml, css和javascript, 但偏偏很多coder都像你一样看不起这些东西. 估计你没了web control就啥也干不成

  回复  引用    

#23楼  2006-07-12 20:50 姚海涛 [未注册用户]
最近在开发强制使用 Web标准　的 CMS 系统
  回复  引用    

#24楼  2006-07-13 13:25 BlueAnson      
还可以，，不算很复杂，，
  回复  引用  查看    

#25楼  2006-07-15 06:39 old9 [未注册用户]
凑个热闹

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>title</title>
<meta http-equiv="Content-type" content="text/html; charset=gb2312" />
<style type="text/css">
*{padding:0;margin:0;}
body{position:relative; width:80%; min-width:700px; margin:auto;}
.head{background:#09C; height:100px;}
.c1{background:#F90; width: 150px; height:300px; position:absolute; top:100px; left:0;}
.c2,.c3,.c4{height:100px; margin:0 150px; position:relative; }
.c2{background:#900;}
.c3{background:#039;}
.c4{background:#900;}
.more{position:absolute;right:1em;bottom:.5em;}
.c5{background:#F00; width:150px;height:300px; position:absolute; top:100px; right:0;}
.foot{background:#09C; height:100px;}
</style>
<!--[if lt ie 7 ]>
<style type="text/css"> body{width:expression(document.documentElement.clientWidth>875?"80%":"700px");}
</style>
<![endif]-->
</head>
<body>

<div class="head">head</div>
<div class="c1">111<div class="more">更多</div></div>
<div class="c2">222<div class="more">更多</div></div>
<div class="c3">333<div class="more">更多</div></div>
<div class="c4">444<div class="more">更多</div></div>
<div class="c5">555<div class="more">更多</div></div>
<div class="foot">foot</div>

</body>
</html>
  回复  引用    

#26楼  2006-07-15 10:35 forestgan [未注册用户]
看那张图片上应用的色彩，感觉站长在何色彩差异和亮度差异的概念上还须努力。
  回复  引用    

#27楼 [楼主] 2006-07-15 10:55 爆牙齿      
@old9
老九也来啦，出手不凡啊，CSS实现上几乎完美，比我强。不过在结构上我觉得还是有点点点瑕疵，你个牛人来凑啥热闹啊，一边儿呆着去……被砸场了TT。唉，兄弟伙们没一个人在杭州。

  回复  引用  查看    

#28楼  2006-07-17 12:42 Na57      
学习了....
  回复  引用  查看    

#29楼  2006-07-17 15:24 大尾巴de鱼 [未注册用户]
<!--[if lt ie 7 ]>
<style type="text/css"> body{width:expression(document.documentElement.clientWidth>875?"80%":"700px");}
</style>
<![endif]-->

什么意思啊？ ie7 自动就会执行？

请介绍一下：<!--[if lt ie 7 ]> <![endif]--> 语法

还是就是简单的注释语句阿！
  回复  引用    

#30楼  2006-07-20 20:53 x5 [未注册用户]
请教个问题，老九的那个“更多”为啥要用div而不用span？
  回复  引用    

#31楼 [楼主] 2006-07-20 21:38 爆牙齿      
@x5
这个问题的答案是：因为他用错了。^_^

所以我说他有瑕疵呗，还有，呵呵。
  回复  引用  查看    

#32楼  2008-01-08 18:53 Enzo      
呵呵！
  回复  引用  查看    

#33楼  2008-04-22 01:12 klone [未注册用户]
这TMD算什么考题啊！
随便上CSSPLAY.CO.UK上面就可以COPY几个下来啦！
  回复  引用    


标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2006-07-11 21:32 编辑过
 
另存  打印
最新IT新闻:
· 腾讯CEO马化腾:中国互联网业准备再过冬
· F8 Keynote Speech[多图]
· 奥运核心资源被分食 搜狐央视网谁忽悠谁？
· 微软推新型搜索技术"BrowseRank"挑战谷歌
· 2008年7月26日IT博客精选
博客园新闻频道  博客园首页  社区