打印

[讨论] WEB标准考题汇总贴

greengnn [楼主]

酒酣几度

荣誉管理团队

认证
帖子: 1299
体力: 1883
威望: 127
当前: 北京海淀区
离线: 3 天

专长 网页设计,前端制作,策划

1^# 大中小发表于 2008-1-6 23:31

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

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

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

TOP

西部数码分布式集群主机傲视群雄 | 韩国主机，快速稳定免备案，讯网科技

osmn00

竹馥堂主

初级会员

认证
帖子: 221
体力: 82
威望: 1
当前: 广东珠海
离线: 5 天

专长 前端制作,UE,策划

2^# 大中小发表于 2008-1-7 08:14

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

TOP

PSD网页模板下载,高端实用 | 免费自助建站

bo84

不是小孩

中级会员

帖子: 177
体力: 340
威望: 0
当前: 广东广州
离线: 40 天

3^# 大中小发表于 2008-1-7 08:48

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

不是小孩

TOP

osmn00

竹馥堂主

初级会员

认证
帖子: 221
体力: 82
威望: 1
当前: 广东珠海
离线: 5 天

专长 前端制作,UE,策划

4^# 大中小发表于 2008-1-7 08:52

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

TOP

cycloned

程让

金牌会员

帖子: 1514
体力: 3501
威望: 0
当前: 上海浦东
离线: 5 天

专长 网页设计,前端制作,UE

5^# 大中小发表于 2008-1-7 09:05

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

TOP

lu6428

二月秋风

中级会员

帖子: 153
体力: 299
威望: 0
当前: 湖北武汉
离线: 186 天

6^# 大中小发表于 2008-1-7 09:30

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

PS梦工厂

TOP

HRea

新手上路

帖子: 19
体力: 0
威望: 0
当前: 上海浦东
离线: 387 天

7^# 大中小发表于 2008-1-7 09:53

确实太简单了.

TOP

stubend

中级会员

认证
帖子: 199
体力: 410
威望: 0
当前: 广东深圳
离线: 53 天

专长 前端制作,JS

8^# 大中小发表于 2008-1-7 10:05

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

TOP

greengnn [楼主]

酒酣几度

荣誉管理团队

认证
帖子: 1299
体力: 1883
威望: 127
当前: 北京海淀区
离线: 3 天

专长 网页设计,前端制作,策划

9^# 大中小发表于 2008-1-7 13:01

另外一道考题，来自：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标准群：46077068

TOP

greengnn [楼主]

酒酣几度

荣誉管理团队

认证
帖子: 1299
体力: 1883
威望: 127
当前: 北京海淀区
离线: 3 天

专长 网页设计,前端制作,策划

10^# 大中小发表于 2008-1-7 13:08

我做过的考题

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

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

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

TOP

greengnn [楼主]

酒酣几度

荣誉管理团队

认证
帖子: 1299
体力: 1883
威望: 127
当前: 北京海淀区
离线: 3 天

专长 网页设计,前端制作,策划

11^# 大中小发表于 2008-1-7 13:12

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

淘宝的考题

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

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

TOP

hbwhlanse

初级会员

帖子: 32
体力: 67
威望: 0
当前: 湖北武汉
离线: 544 天

12^# 大中小发表于 2008-1-7 16:52

看过

webdesign

TOP

hero4u

孤竹林

银牌会员

认证
帖子: 1305
体力: 2437
威望: 14
当前: 湖南长沙
离线: 16 天

专长 前端制作,搜索,推广

13^# 大中小发表于 2008-1-7 17:15

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

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

体验游戏 game4power

TOP

greengnn [楼主]

酒酣几度

荣誉管理团队

认证
帖子: 1299
体力: 1883
威望: 127
当前: 北京海淀区
离线: 3 天

专长 网页设计,前端制作,策划

14^# 大中小发表于 2008-1-7 18:54

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

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

TOP

lomo

盗版量子

初级会员

帖子: 407
体力: 173
威望: 0
当前: 北京海淀区
离线: 11 天

15^# 大中小发表于 2008-1-7 21:45

lomo

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

TOP

zhangjiewx

中级会员

帖子: 133
体力: 212
威望: 0
当前: 广东深圳
离线: 226 天

16^# 大中小发表于 2008-1-8 11:41

深入进去才发现不简单

开着法拉利和飞机赛跑

TOP

yongwangtv

初级会员

帖子: 60
体力: 139
威望: 0
当前: 广东惠州
离线: 151 天

17^# 大中小发表于 2008-1-16 06:24

我交的作业

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

<!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;}
#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>

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

TOP

yongwangtv

初级会员

帖子: 60
体力: 139
威望: 0
当前: 广东惠州
离线: 151 天

18^# 大中小发表于 2008-1-16 06:33

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

TOP

welcome58

缘由心生

银牌会员

帖子: 469
体力: 1068
威望: 2
当前: 北京海淀区
离线: 5 天

专长 UI,前端制作,JS

19^# 大中小发表于 2008-1-16 08:27

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

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

TOP