一个公司的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{
            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。”内容，引导用户登录上述网站进行报名、互动