某游戏公司UE设计师笔试题及答案
最近获得一份UE设计师（web前端）笔试切图题，自己做了做，呵呵
在这儿给大家PP。
基础题：
题目一：请为demo.html中的每个图片添加链接，hover样式为3像素的黄色边框，鼠标划过时页面不能有抖动。
做完后页面效果：
<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {margin:0;padding:0;list-style:none;}
ul{ padding:10px; margin:10px auto; width:180px}
li{ float:left; height:60px}
img{border:0;}
li a:link, li a:visited, li a:active{display:block; width:60px; height:60px; overflow:hidden;}
li a:hover{width:54px; height:54px; border:3px solid yellow;}
li a:hover img{margin-left:-3px; margin-top:-3px;}
-->
</style>
</head><body>
<ul>
<li><a href="#"><img src="avatar.jpg" alt="头像1" width="60" height="60" border="0" /></a></li>
<li><a href="#"><img src="avatar.jpg" alt="头像2" width="60" height="60" border="0" /></a></li>
<li><a href="#"><img src="avatar.jpg" alt="头像3" width="60" height="60" border="0" /></a></li>
<li><a href="#"><img src="avatar.jpg" alt="头像4" width="60" height="60" border="0" /></a></li>
<li><a href="#"><img src="avatar.jpg" alt="头像5" width="60" height="60" border="0" /></a></li>
<li><a href="#"><img src="avatar.jpg" alt="头像6" width="60" height="60" border="0" /></a></li>
</ul>
</body>
</html>
题目二：不改变代码结构，做出demo.jpg所示效果，尺寸任意。代码在demo.html如下：
<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {margin:0;padding:0;list-style:none;}
ul{ padding:10px; margin:10px auto; width:180px}
li{ float:left; height:60px}.nav, .container, .footer{width:1000px; clear:both; margin:0 auto;}
.nav, .sidebar, .main, .footer{background-color:#FE6B00; text-align:center; font: bold 1.8em Verdana, Arial, Helvetica, sans-serif; color:#fff;}
.nav{height:88px; line-height:88px; margin-bottom:10px;}
.container{margin-bottom:10px;}
.sidebar{width:200px; height:400px; line-height:400px; float:right;}
.main{margin-right:210px; height:400px; line-height:400px;}
.footer{height:88px; line-height:88px;}
-->
</style>
</head><body>
<div>nav</div>
<div>
<div>sidebar</div>
<div>main</div>
</div>
<div>footer</div>
</body>
</html>
切图题：
首 页：http://blog.shellway.cn/bbg/
用户页：http://blog.shellway.cn/bbg/user.html
搜索页：http://blog.shellway.cn/bbg/search.html
------> 考题概述 <--------------------------------------------------------------------------------
切分要求描述：
1.请按照图例将页面切分，小图标部分尽量使用CSS Sprite。
2.页面标准请使用xhtml1.0，语系请采用utf-8
3.页面的链接等交互效果请根据图片自行安排，需要考虑到用户使用的合理性。
4. 导航“五个色块”处做红色和橙色两种样式切换即可，黄色版本请自行调配，包括 标题、字的颜色等等，小图标不用换。js制作要求描述：
1.请仿造windows的下拉方式，制作对应交互效果的js菜单。
2.请制作tab标签切换的效果。注意css上对应的开启与关闭状态。
3.js请另外存放尽量不要散落在页面中。
2010年07月26日 00:26
深有体会啊
2010年07月30日 22:41
很有提醒。谢谢了