经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › WEB标准考题汇总贴

查看: 3116|回复: 18

[讨论] WEB标准考题汇总贴 [复制链接]

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-1-6 23:31:00 |显示全部楼层

把你做过的，或者给别人出过的考题展示在这里

我先收录一下爆牙齿的WEB标准考题
http://www.cnblogs.com/yuntian/archive/2006/07/11/447899.aspx

blog Web标准化交流会 WEB标准群：23783439

西部数码顶级域名注册商39元抢注！

使用道具举报

osmn00　

竹馥堂主

初级会员 

帖子: 222
体力: 117
威望: 2
居住地: 广东省珠海市

发表于 2008-1-7 08:14:52 |显示全部楼层

这个前年的考题对现在的很多做前台的来讲是简单了点

www.osmn00.com

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

bo84　

不是小孩

中级会员

帖子: 177
体力: 345
威望: 0
居住地: 广东省广州市

发表于 2008-1-7 08:48:05 |显示全部楼层

我觉得考题的目的有几个:
1.是编码习惯,是否有良好的编写习惯.
2.是否对布局几个要点是否掌握.

不是小孩

使用道具举报

osmn00　

竹馥堂主

初级会员 

帖子: 222
体力: 117
威望: 2
居住地: 广东省珠海市

发表于 2008-1-7 08:52:12 |显示全部楼层

记得之前淘宝UDE团队那个招聘启示，里面关于CSS的考题就很有意思，自己也做出了答案，但没提交，想想现在才大一，跟着凑什么热闹，呵呵。

www.osmn00.com

使用道具举报

cycloned　

程让

钻石会员 

帖子: 1668
体力: 7009
威望: 1

发表于 2008-1-7 09:05:09 |显示全部楼层

我觉得这题没什么难度，难道是我理解错了题目？

使用道具举报

lu6428　

二月秋风

中级会员

帖子: 157
体力: 521
威望: 0
居住地: 湖北省武汉市

发表于 2008-1-7 09:30:21 |显示全部楼层

搞不懂这考题是做什么用的啊,

PS梦工厂

使用道具举报

HRea　

新手上路 

帖子: 19
体力: 8
威望: 0

发表于 2008-1-7 09:53:55 |显示全部楼层

确实太简单了.

使用道具举报

stubend　

高级会员 

帖子: 203
体力: 755
威望: 0
居住地: 广东省广州市

发表于 2008-1-7 10:05:42 |显示全部楼层

这个题目我做过。。。
问题虽然简单，考的是你的思路！
比如栏目1跟栏目5，栏目2、3、4之间，你怎么处理、标题怎么处理、更多怎么处理？
小问题看出大事件~
假如你这些小小的布局都不布的不合理的话，复杂的布局，你怎么布？

使用道具举报

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-1-7 13:01:29 |显示全部楼层

另外一道考题，来自：http://blog.joycode.com/joy/archive/2007/08/28/107691.aspx

有以下的HTML架构，希望实现以下三种不同的用户体验，并且兼容IE 6+，Firefox 1.5+以上的浏览器。

<div id=”Header”>这是标题</div>
<div id=”Main”>
<div id=”Content”>这是主内容</div>
<div id=”Sidebar”>
<div id=”Stats”>
<ul><li>主页</li><li>目录1</li><li>目录2</li></ul>
</div>
<div class="other">这是其它内容</div>
</div>
</div>
<div id=”Footer”>这是结尾</div>

复制代码

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

blog Web标准化交流会 WEB标准群：23783439

使用道具举报

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-1-7 13:08:11 |显示全部楼层

我做过的考题

要求实现如图的三栏布局，实现纯颜色的换肤，自由发挥无标准答案

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

blog Web标准化交流会 WEB标准群：23783439

使用道具举报

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-1-7 13:12:04 |显示全部楼层

淘宝UI的考题[非JS部分]

淘宝的考题

1.使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
2.在不使用 border 样式的情况下，画出一条一px高的横线，在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果。

blog Web标准化交流会 WEB标准群：23783439

使用道具举报

hbwhlanse　

初级会员

帖子: 32
体力: 159
威望: 0
居住地: 湖北省武汉市

发表于 2008-1-7 16:52:04 |显示全部楼层

看过

webdesign

使用道具举报

hero4u　

孤竹林

金牌会员 

帖子: 1305
体力: 3444
威望: 14
居住地: 湖南省长沙市

发表于 2008-1-7 17:15:56 |显示全部楼层

呵呵，我觉得考技巧不如考基本功了。

丢30张psd源文件，看你花费多少个小时做完了。然后让后台程序员给代码评分，让美工检测是否一致。

体验游戏 game4power

使用道具举报

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-1-7 18:54:16 |显示全部楼层

原来CSSXP是你的马甲啊，其实招聘也分找什么人进来，是整站页面架构呢还是小型活动的快速处理，考察的点是不同的

blog Web标准化交流会 WEB标准群：23783439

使用道具举报

lomo　

盗版量子

高级会员

帖子: 416
体力: 803
威望: 0

发表于 2008-1-7 21:45:02 |显示全部楼层

lomo

这个帖子好，有时间一个一个做一下...

使用道具举报

zhangjiewx　

中级会员

帖子: 133
体力: 432
威望: 0
居住地: 广东省深圳市

发表于 2008-1-8 11:41:51 |显示全部楼层

深入进去才发现不简单

开着法拉利和飞机赛跑

使用道具举报

yongwangtv　

初级会员

帖子: 60
体力: 144
威望: 0
居住地: 广东省惠州市

发表于 2008-1-16 06:24:36 |显示全部楼层

我交的作业

感谢几度给我出的一道题目，我算新手吧，花了一晚上时间编了出来，不知道多少代码重复，多少不足之出，还希望蓝色朋友帮我挑出来我好改，知道自己的缺点错误的所在，应为自己怎么也看不到那里错了，哎一晚上时间就搞这东西了，眼睛都写痛了。感觉这种方式很好，来个直顶贴一个星期给新手出点题目做，很实在....下面是我一晚上的作品不知道怎么样..大家PP...
我用的是IE6好象没什么问题不知道IE7和FF下是不是变型的不成样子了...

h1 {font-size:12px;font-weight:500;padding-top:2px;padding-left:10px;}
#ab {width:700px;height:100px;background:#0099cc;margin:auto;}
#ab-right {width:150px;height:96px;float:right;}
h3 {margin-top:30px;font-size:25px;font-weight:bolder;margin-left:8px;float:left;}
h3 span{font-size:14px;font-weight:600;font-style:italic;margin-left:6px;}
h4 {font-size:12px;font-weight:400;position:absolute;top:56px;left:418px;}
p.en {padding-top:7px;padding-left:10px;font-size:14px;font-weight:bold;}

#ac {width:700px;height:300px;margin:auto;}
#ac-left {width:120px;height:300px;background:#ff9900;float:left;}
#ac-right {width:120px;height:300px;background:#FFFF00;float:right;}
#ac-center {width:460px;height:300px;float:left;}
#ac-center-s {width:460px;height:100px;background:#990000;float:left;}
#ac-center-z {width:460px;height:100px;background:#003399;float:left;}
#ac-center-x {width:460px;height:100px;background:#990000;float:left;}

h1.aa {font-size:12px;font-weight:500;padding-top:2px;padding-left:3px;}
p.ee {padding-top:2px;padding-left:3px;font-size:14px;font-weight:bold;}
h1.gengduo {margin-right:3px;margin-top:216px;font-size:12px;font-weight:500;float:right;}

h1.bb {font-size:12px;font-weight:500;padding-top:2px;padding-left:8px;line-height:110%;}
p.ff {padding-top:8px;padding-left:8px;font-size:14px;font-weight:bold;}
h1.gengduo1 {margin-right:3px;font-size:12px;font-weight:500;float:right;}

#ad {width:700px;height:100px;background:#669966;margin:auto;}
#ad-left {width:200px;height:100px;float:left;}
#ad-right {width:150px;height:100px;float:right;}
p.em {font-size:14px;font-weight:bold;margin-top:10px;margin-left:18px;}
h1.gg {font-size:12px;font-weight:500;margin-left:10px;}
h1 span{color:#FFFFFF;}

</style>
</head>
<body>

<div id="ab"><h3>爆牙齿的Web标准考试题<span>beta</span></h3><h4>2006 7 11</h4>
<div id="ab-right"><p class="en">页头</p>
<h1>页面居中时宽度为700px</h1>
<h1>页面自适应时宽度自适应</h1>
<h1>高度固定为100px</h1>
<h1>色彩代码为：#0099cc</h1>
</div>
</div>

<div id="ac">
<div id="ac-left">
<p class="ee">栏目一<p>
<h1 class="aa">宽度固定120px</h1>
<h1 class="aa">高度固定300px</h1>
<h1 class="aa">色彩代码为：#0099cc</h1>
<h1 class="gengduo">更多<<</h1></div>

<div id="ac-center">
<div id="ac-center-s">
<p class="ff">栏目二<p>
<h1 class="bb">页面居中时宽度为460px</h1>
<h1 class="bb">页面自适应时宽度自适应</h1>
<h1 class="bb">高度固定100px</h1>
<h1 class="bb">色彩代码为：#990000</h1>
<h1 class="gengduo1">更多<<</h1>
</div>
<div id="ac-center-z">
<p class="ff">栏目三<p>
<h1 class="bb">页面居中时宽度为460px</h1>
<h1 class="bb">页面自适应时宽度自适应</h1>
<h1 class="bb">高度固定100px</h1>
<h1 class="bb">色彩代码为：#003399</h1>
<h1 class="gengduo1">更多<<</h1>
</div>
<div id="ac-center-x">
<p class="ff">栏目四<p>
<h1 class="bb">页面居中时宽度为460px</h1>
<h1 class="bb">页面自适应时宽度自适应</h1>
<h1 class="bb">高度固定100px</h1>
<h1 class="bb">色彩代码为：#990000</h1>
<h1 class="gengduo1">更多<<</h1>
</div>
</div>

<div id="ac-right">
<p class="ee">栏目五<p>
<h1 class="aa">宽度固定120px</h1>
<h1 class="aa">高度固定300px</h1>
<h1 class="aa">色彩代码为：#ff0000</h1>
<h1 class="gengduo">更多<<</h1></div>
</div>

<div id="ad">
<div id="ad-left"><p class="ff">页脚</p>
<h1 class="bb">页面居中时宽度为700px</h1>
<h1 class="bb">页面自适应时宽度自适应</h1>
<h1 class="bb">高度固定100px</h1>
<h1 class="bb">色彩代码为：#0099cc</h1></div>
<div id="ad-right">
<p class="em">附近：考题说明</p>
<h1 class="gg">请写出xhtml和css展现</h1>
<h1 class="gg">出图片中所有内容</h1>
<h1 class="gg"><span>没有标准答案</span></h1>
<h1 class="gg">JS部分未来加上</h1>

</div>
</div>

</body>
</html>

提示：您可以先修改部分代码再运行

使用道具举报

yongwangtv　

初级会员

帖子: 60
体力: 144
威望: 0
居住地: 广东省惠州市

发表于 2008-1-16 06:33:26 |显示全部楼层

2006 7 11 这里好象不是自适应的，我想了好久不知道怎么样办，
帮我看下改下代码在贴下一楼
我好学习下

使用道具举报

welcome58　

缘由心生

银牌会员

帖子: 473
体力: 2799
威望: 2

发表于 2008-1-16 08:27:01 |显示全部楼层

在你的基础上改了一点，你应该能找到

<!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">
<html>
<head>
<title>爆牙齿的Web标准考试题</title>
<style type="text/css">
* {margin:0px;padding:0px;border:none;color:#000000;font-size:12px;}
h1 {font-size:12px;font-weight:500;padding-top:2px;padding-left:10px;}
#ab {width:700px;height:100px;background:#0099cc;margin:auto;position:relative;}
#ab-right {width:150px;height:96px;float:right;}
h3 {background:#CCC;margin-top:30px;font-size:25px;font-weight:bolder;margin-left:8px;float:left;}
h3 span{font-size:14px;font-weight:600;font-style:italic;margin-left:6px;}
h4 {font-size:12px;background:#CC0;font-weight:400;position:absolute;top:56px;left:318px;}}
p.en {padding-top:7px;padding-left:10px;font-size:14px;font-weight:bold;}
#ac {width:700px;height:300px;margin:auto;}
#ac-left {width:120px;height:300px;background:#ff9900;float:left;}
#ac-right {width:120px;height:300px;background:#FFFF00;float:right;}
#ac-center {width:460px;height:300px;float:left;}
#ac-center-s {width:460px;height:100px;background:#990000;float:left;}
#ac-center-z {width:460px;height:100px;background:#003399;float:left;}
#ac-center-x {width:460px;height:100px;background:#990000;float:left;}
h1.aa {font-size:12px;font-weight:500;padding-top:2px;padding-left:3px;}
p.ee {padding-top:2px;padding-left:3px;font-size:14px;font-weight:bold;}
h1.gengduo {margin-right:3px;margin-top:216px;font-size:12px;font-weight:500;float:right;}
h1.bb {font-size:12px;font-weight:500;padding-top:2px;padding-left:8px;line-height:110%;}
p.ff {padding-top:8px;padding-left:8px;font-size:14px;font-weight:bold;}
h1.gengduo1 {margin-right:3px;font-size:12px;font-weight:500;float:right;}
#ad {width:700px;height:100px;background:#669966;margin:auto;}
#ad-left {width:200px;height:100px;float:left;}
#ad-right {width:150px;height:100px;float:right;}
p.em {font-size:14px;font-weight:bold;margin-top:10px;margin-left:18px;}
h1.gg {font-size:12px;font-weight:500;margin-left:10px;}
h1 span{color:#FFFFFF;}
</style>
</head>
<body>

<div id="ab"><h3>爆牙齿的Web标准考试题<span>beta</span></h3><h4>2006 7 11</h4>
<div id="ab-right"><p class="en">页头</p>
<h1>页面居中时宽度为700px</h1>
<h1>页面自适应时宽度自适应</h1>
<h1>高度固定为100px</h1>
<h1>色彩代码为：#0099cc</h1>
</div>
</div>
<div id="ac">
<div id="ac-left">
<p class="ee">栏目一<p>
<h1 class="aa">宽度固定120px</h1>
<h1 class="aa">高度固定300px</h1>
<h1 class="aa">色彩代码为：#0099cc</h1>
<h1 class="gengduo">更多<<</h1></div>
<div id="ac-center">
<div id="ac-center-s">
<p class="ff">栏目二<p>
<h1 class="bb">页面居中时宽度为460px</h1>
<h1 class="bb">页面自适应时宽度自适应</h1>
<h1 class="bb">高度固定100px</h1>
<h1 class="bb">色彩代码为：#990000</h1>
<h1 class="gengduo1">更多<<</h1>
</div>
<div id="ac-center-z">
<p class="ff">栏目三<p>
<h1 class="bb">页面居中时宽度为460px</h1>
<h1 class="bb">页面自适应时宽度自适应</h1>
<h1 class="bb">高度固定100px</h1>
<h1 class="bb">色彩代码为：#003399</h1>
<h1 class="gengduo1">更多<<</h1>
</div>
<div id="ac-center-x">
<p class="ff">栏目四<p>
<h1 class="bb">页面居中时宽度为460px</h1>
<h1 class="bb">页面自适应时宽度自适应</h1>
<h1 class="bb">高度固定100px</h1>
<h1 class="bb">色彩代码为：#990000</h1>
<h1 class="gengduo1">更多<<</h1>
</div>
</div>
<div id="ac-right">
<p class="ee">栏目五<p>
<h1 class="aa">宽度固定120px</h1>
<h1 class="aa">高度固定300px</h1>
<h1 class="aa">色彩代码为：#ff0000</h1>
<h1 class="gengduo">更多<<</h1></div>
</div>
<div id="ad">
<div id="ad-left"><p class="ff">页脚</p>
<h1 class="bb">页面居中时宽度为700px</h1>
<h1 class="bb">页面自适应时宽度自适应</h1>
<h1 class="bb">高度固定100px</h1>
<h1 class="bb">色彩代码为：#0099cc</h1></div>
<div id="ad-right">
<p class="em">附近：考题说明</p>
<h1 class="gg">请写出xhtml和css展现</h1>
<h1 class="gg">出图片中所有内容</h1>
<h1 class="gg"><span>没有标准答案</span></h1>
<h1 class="gg">JS部分未来加上</h1>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

不懂就问
http://www.welcome58.cn

使用道具举报

返回列表

		自动登录	找回密码
密码			注册

[讨论] WEB标准考题汇总贴 [复制链接]

淘宝UI的考题[非JS部分]

lomo

我交的作业

浏览过的帖子

浏览过的版块