一个公司的UI笔试上机题目
1 表格美化
现有某论坛的帖子列表页面,该页面同时包含 公告、置顶、普通 三类主题,原始页面效果见下图,源文件见“表格美化.htm”。
在表格html结构不允许修改的情况下,对现有表格样式进行调整,提高该页面内容的结构性,方便用户浏览。
要求:
1. 表格总宽度按客户端屏幕宽度自适应。
2. 用户可清晰的区分某个主题的类型(公告、置顶、普通 三类)
3. 用户可从界面获得暗示——第一列(“论坛公告”)点击后可打开页面查看帖子的详细内容
4. 对于精华帖子、有图片的帖子,需要在第一列前方显示该帖子的特殊性(如下图),在表格不允许为此增加多一列的情况下,给出CSS解决方案并实现。
附代码:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<table border=1>
<caption>
汽车之家 广汽传祺论坛
</caption>
<thead>
<th>
<tr>
<td>帖子标题</td>
<td>作者</td>
<td>回贴数/点击数</td>
<td>最后回复</td>
</tr>
</th>
</thead>
<tbody>
<tr>
<td colspan="4">论坛公告</td>
</tr>
<tr>
<td>【NEW】保险平台新版上线!购商业险满1500元赠300元加油卡</td>
<td>社区快报员<br/>2011-06-15 </td>
<td>209/14381 </td>
<td>2011-6-16 22:11<br/>西北达人</td>
</tr>
<tr>
<td>【随拍有礼】随手拍汽车之家车标赢奖品—马上动起来!!</td>
<td>社区快报员<br/>2011-06-15 </td>
<td>31/1481 </td>
<td>2011-6-11 22:11<br/>西北达人</td>
</tr>
<tr>
<td>【广州】广汽传祺“三车”对比试乘试驾体验活动火热召集中 1 2 </td>
<td>经销商活动_广东<br/>2011-06-15 </td>
<td>11/201 </td>
<td>2011-6-16 22:11<br/>西北达人</td>
</tr>
<tr>
<td>【沪】汽车之家服务商上线_贴膜|美容|装饰|团购 </td>
<td>上海管理员<br/>2011-09-30 </td>
<td>19/481 </td>
<td>2011-6-16 22:11<br/>西北达人</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="4">版内置顶 </td>
</tr>
<tr>
<td>代理版主第五贴,纯文字:欢迎拍砖,仅供讨论!</td>
<td>社区快报员<br/>2011-06-15 </td>
<td>209/14381 </td>
<td>2011-6-16 22:11<br/>西北达人</td>
</tr>
<tr>
<td>斑竹第六贴:版务规范,必读!</td>
<td>社区快报员<br/>2011-06-15 </td>
<td>31/1481 </td>
<td>2011-6-11 22:11<br/>西北达人</td>
</tr>
<tr>
<td>【科普贴】轮胎知识(更新) </td>
<td>经销商活动_广东<br/>2011-06-15 </td>
<td>11/201 </td>
<td>2011-6-16 22:11<br/>西北达人</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="4">论坛主题</td>
</tr>
<tr>
<td>准备这个星期天去订车了,突然又想换英朗GT,纠结。。。 </td>
<td>嘿嘿18<br/>2011-06-15 </td>
<td>209/14381 </td>
<td>2011-6-16 22:11<br/>嘿嘿18</td>
</tr>
<tr>
<td>逛重庆车展归来,豪车与美女,你能不看么? </td>
<td>社区快报员<br/>2011-06-15 </td>
<td>31/1481 </td>
<td>2011-6-11 22:11<br/>卡罗拉之旅</td>
</tr>
<tr>
<td>很实用的经验分享!参考一下吧!!</td>
<td>fushen<br/>2011-06-15 </td>
<td>11/201 </td>
<td>2011-6-16 22:11<br/>fushen</td>
</tr>
<tr>
<td>提车注意事项 </td>
<td>骨头小弟<br/>2011-06-15 </td>
<td>11/201 </td>
<td>2011-6-16 22:11<br/>fushen</td>
</tr>
<tr>
<td>【科普贴】掀起黑车企的屁股帘,车企隐私大揭秘,大家都来长见识</td>
<td>fushen<br/>2011-06-15 </td>
<td>11/201 </td>
<td>2011-6-16 22:11<br/>骨头小弟</td>
</tr>
</tbody>
</table>
</body>
</html>
2 页面布局
制作一个页面,要求实现三行两列的布局效果,源代码参考“页面布局.htm”。
请在“页面布局.htm”中对CSS样式进行调整,html结构可做适当调整。
要求:
1. 页面宽度自适应,整体居中,并在左右两侧保留20像素的空白。
2. A区域为页面头部,高度固定100像素。
3. B区域为子菜单项,位于页面左侧,宽度固定200像素,高度自适应。
4. C区域为页面主题内容项,位于页面右侧,高宽自适应。
5. D区域为页面底部,位于页面下方
6. B可能比C高,也可能比C矮,任何情况下,D都永远在B和C的下方,不允许相互重叠。
7. 禁止采用table布局,否则直接判0分。
附代码:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8">
<style type="text/css">
div{
border:1px solid red;
margin:2px;
}
.head{
height:100px;
}
.sub_menu{
width:200px;
}
.head{
height:50px;
}
</style>
</head>
<body>
<div class="head">
我是主菜单,高度固定100像素,宽度按屏幕大小自适应,主菜单菜单如下——
<br/>
首页 新闻 下载 博客 论坛
</div>
<div class="sub_menu">
我是子菜单,宽度固定200像素,高度按菜单内容自适应,子菜单如下——
<br/>
IT特快
<br/>
前沿技术
<br/>
最新资讯
<br/>
论坛活动
<br/>
设计师之家
<br/>
社会招聘
<br/>
任务悬赏
</div>
<div class="content">
我是主内容框,宽度按屏幕大小自适应(刨去辅菜单的宽度),高度按内容多少自适应
2011年第六届中国元素国际创意大赛开始征稿啦!
来源:www.chineseelement.com 作者:www.chineseelement.com 发布日期:2011-05-30 209 次阅读 分享到:
关注中国元素的朋友,您好!
2011年第六届中国元素国际创意大赛开始征稿啦!</p>
"中国元素国际创意大赛"发轫于2006年,是经中国国家工商总局批准,由中国广告协会主办,清华大学、北京大学提供学术支持,是"中国国际广告节"的主体板块之一。五年来,大赛揣着中国文化、经济和人心向背的底气,胸怀对中国乃至世界人类文明的责任,走过15座城市,115家院校;收到3587家公司踊跃共递交的24,562幅创意作品,有着270,000篇新闻报道记录大赛的每一步成长。“中国元素国际创意大赛”是每个创意人才发挥想象的乐土,是每个创意人才互相切磋的平台,是每个创意人才证明自己的起点。</p>
往年的创意大赛主要是以“广告项”为主,其中包括:平面图形,影视动画,户外环境和电台广播,而今年的中国元素国际创意大赛在五年的强大蓄势后,合力再度出发,搭建了更大平台。今年首次引入了“设计项”包括:时尚服饰、产品造型、建筑设计,以及“营销项”包括:公共事件。而“广告项”也在原有的项目基础上增加了“互动体验”这个分类。 此外,今年的大赛将启用在线上传系统,您可以看见完整的评选过程,还可以邀请网络好友支持自己,支持数靠前可以提前入围哦!
扩大评选项目种类后的“中国元素国际创意大赛”为更多领域的创意人才提供了展现自我的平台,欢迎服装设计、工业设计、建筑设计,互动和公关领域的创意人才积极参加。如果您身边有这类人才,也可以推荐他参加大赛,将一颗颗喜爱中国文化的创意小星星汇聚起来,相互碰撞,激发出最璀璨的星空夜景。
如果您想得到同领域专业评委的指导,如果您想和同领域创意高手一较高低,那么请来参加“中国元素国际创意大赛”,递交作品,请随时关注:
大赛网站:www.chineseelement.com ,
大赛新浪微博:http://weibo.com/chineseelement。
期待您的参与!
中国元素国际创意大赛组委会
2011/5/18
</div>
<div class="foot">我是页尾文字,高度固定50像素</div>
</body>
</html>
3 UI控件
在试题2页面中的A部分,实现一级主菜单,菜单项包括—首页、新闻、下载、博客论坛,在B部分,实现一级子菜单,菜单项包括—IT特快、前沿技术、最新资讯、论坛活动等。
要求:
1. 主菜单中各菜单项采用水平排列,水平方向与A右侧对其,垂直方向与A底部对其。
2. 子菜单中各菜单项采用垂直排列。
3. 如在页面中增加新的菜单项,不需要重新调整各菜单项的样式,即可在html页面正确显示。
4. 对当前激活的菜单项和非激活的菜单项,外观上应有明确的区别。
4 图文排版
在试题2页面中的B部分,添加一篇文章和图片,文章内容为——
2011年第六届中国元素国际创意大赛开始征稿啦! 来源:www.chineseelement.com 作者:www.chineseelement.com 发布日期:2011-05-30 209 次阅读 分享到: 关注中国元素的朋友,您好! 2011年第六届中国元素国际创意大赛开始征稿啦!
"中国元素国际创意大赛"发轫于2006年,是经中国国家工商总局批准,由中国广告协会主办,清华大学、北京大学提供学术支持,是"中国国际广告节"的主体板块之一。五年来,大赛揣着中国文化、经济和人心向背的底气,胸怀对中国乃至世界人类文明的责任,走过15座城市,115家院校;收到3587家公司踊跃共递交的24,562幅创意作品,有着270,000篇新闻报道记录大赛的每一步成长。“中国元素国际创意大赛”是每个创意人才发挥想象的乐土,是每个创意人才互相切磋的平台,是每个创意人才证明自己的起点。
往年的创意大赛主要是以“广告项”为主,其中包括:平面图形,影视动画,户外环境和电台广播,而今年的中国元素国际创意大赛在五年的强大蓄势后,合力再度出发,搭建了更大平台。今年首次引入了“设计项”包括:时尚服饰、产品造型、建筑设计,以及“营销项”包括:公共事件。而“广告项”也在原有的项目基础上增加了“互动体验”这个分类。 此外,今年的大赛将启用在线上传系统,您可以看见完整的评选过程,还可以邀请网络好友支持自己,支持数靠前可以提前入围哦! 扩大评选项目种类后的“中国元素国际创意大赛”为更多领域的创意人才提供了展现自我的平台,欢迎服装设计、工业设计、建筑设计,互动和公关领域的创意人才积极参加。如果您身边有这类人才,也可以推荐他参加大赛,将一颗颗喜爱中国文化的创意小星星汇聚起来,相互碰撞,激发出最璀璨的星空夜景。 如果您想得到同领域专业评委的指导,如果您想和同领域创意高手一较高低,那么请来参加“中国元素国际创意大赛”,递交作品,请随时关注: 大赛网站:www.chineseelement.com , 大赛新浪微博:http://weibo.com/chineseelement。 期待您的参与!
中国元素国际创意大赛组委会 2011/5/18
图片为
要求:
1. 图文并茂,文字结构清晰,方便用户阅读。
2. 图片见“pic001.JPG”。
3. 应突出尾部的“大赛网站:www.chineseelement.com , 大赛新浪微博:http://weibo.com/chineseelement。”内容,引导用户登录上述网站进行报名、互动