超越起点 追随自由

我看不见,我的明天,但今天,绝不重复昨天;顺风是滑翔,逆风才是飞翔,火烧过才能化凤凰!

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  294 随笔 :: 16 文章 :: 1119 评论 :: 24 Trackbacks

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

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

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

最后一句:没有标准答案,^_^

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

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

评论

栏目二呢
  回复  引用    

#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 [未注册用户]
图片让你改了最开始你贴的那个尺寸有问题
  回复  引用    

一个色块就是一个<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      
学习了....
  回复  引用  查看    

<!--[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几个下来啦!
  回复  引用