爆牙齿的Web标准面试考题。

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

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

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

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

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

posted on 2006-07-11 11:59 爆牙齿阅读(5284) 评论(36) 编辑收藏

#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>

<div id="wapper">

<div id="header">www.d8in.com</div>


<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>


<div id="footer">www.d8in.com</div>

</div>

</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" />

<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>

</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鱼[未注册用户]

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

请介绍一下： 语法

还是就是简单的注释语句阿！

　回复　引用　

#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几个下来啦！

　回复　引用　

#34楼 2008-09-29 12:15 mf68[未注册用户]

那颜色搭配都出问题

　回复　引用　

#35楼 2009-02-02 16:59 挖客[未注册用户]

呵呵
页脚色值标的有误
色值是#009966

　回复　引用　

#36楼 2009-03-13 22:30 Na-Na[未注册用户]

呵呵来试试看

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>爆牙齿的web标准面试考题</title>
<style type="text/css">
*{margin:0;padding:0;}
hr{ display:none;}
#phead,#pbody,#pfoot{
margin:0 auto;
width:700px;
position:relative;
}
#phead{
background:#0099cc;
height:100px;
}
#pfoot{
clear:both;
background:#009966;
height:100px;
}
#content1{
float:left;
background:#ff9900;
height:300px;
width:120px;
position:relative;
}
#content2,#content3,#content4{
float:left;
height:100px;
width:460px;
position:relative;
}
#content2{ background:#990000;}
#content3{ background:#003399;}
#content4{ background:#990000;}
#content5{
position:absolute;
background:#ffff00;
height:300px;
right:0;
top:0;
width:120px;
}
#phead .info{
position:absolute;
right:5px;
top:5px;
width:150px;
}
.title{ position:absolute;margin:35px 0 0 20px;}
.title h2{ font: bold normal 20px "microsoft Yahei";}
.title sub{font: bold italic 14px Arial, Helvetica, sans-serif;margin-left:10px;}
.date{ display:block; font-size:12px;position:relative;top:65px;width:300px; text-align:right;}
h3{ font: bold normal 14px "宋体";margin:5px 5px 0; }
p{ font-size:12px;margin:0 5px;}
a.fun_more{
position:absolute;
right:5px;
bottom:5px;
color:#333;
font-size:12px;
text-decoration:none;
}
#pfoot .info{ position: absolute;}
#pfoot .intro{
position:absolute;
right:10px;
top:0px;
width:130px;
}
#pfoot .intro em{ font-size:12px; font-style:normal;color:#fff; }

</style>
</head>

<body>
<div id="phead">
<h2 class="title">爆牙齿的web标准面试考题<dfn><sub title="测试版">beta</sub></dfn></h2>
<span class="date">2006 7 19</span>
<div class="info">
<h3>页头</h3>
<p>页面居中时宽度为700px</p>
<p>页面自适应时宽度自适应</p>
<p>高度固定为100px</p>
<p>色彩代码为：#0099cc</p>
</div>
</div>
<hr />
<div id="pbody">
<div id="content1">
<h3>栏目一</h3>
<p>宽度固定为120px</p>
<p>高度固定为300px</p>
<p>色彩代码为#FF9900</p>
<a class="fun_more" href="#">更多<span>>></span></a>
</div>
<div id="content2">
<h3>栏目二</h3>
<p>页面居中时宽度为460px</p>
<p>页面自适应时宽度自适应</p>
<p>高度固定为100px</p>
<p>色彩代码为#990000</p>
<a class="fun_more" href="#">更多<span>>></span></a>
</div>
<div id="content3">
<h3>栏目三</h3>
<p>页面居中时宽度为460px</p>
<p>页面自适应时宽度自适应</p>
<p>高度固定为100px</p>
<p>色彩代码为#003399</p>
<a class="fun_more" href="#">更多<span>>></span></a>
</div>
<div id="content4">
<h3>栏目四</h3>
<p>页面居中时宽度为460px</p>
<p>页面自适应时宽度自适应</p>
<p>高度固定为100px</p>
<p>色彩代码为#990000</p>
<a class="fun_more" href="#">更多<span>>></span></a>
</div>
<div id="content5">
<h3>栏目五</h3>
<p>宽度固定为120px</p>
<p>高度固定为300px</p>
<p>色彩代码为#FF0000</p>
<a class="fun_more" href="#">更多<span>>></span></a>
</div>
</div>
<hr />
<div id="pfoot">
<div class="info">
<h3>页脚</h3>
<p>页面居中时宽度为700px</p>
<p>页面自适应时宽度自适应</p>
<p>高度固定为100px</p>
<p>色彩代码为：#009966</p>
</div>
<div class="intro">
<h3>符：考题说明</h3>
<p>请写出xhtml和css展现出图中所有内容<br />
<em>没有标准答案</em><br />
js部分未加上</p>
</div>
</div>
</body>
</html>