UI题目我的答案
一、表格美化
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
padding:0px;
margin:0px;
font-size:12px;
}
#mainTable {
border:1px solid #ccc;
}
.em {
color:red;
width:100px;
}
</style>
</head>
<body>
<table id="mainTable" border=1px style="border-collapse:collapse;width:98%">
<caption style="font-size: 1.5em; font-weight: bold; color:red;">
汽车之家 广汽传祺论坛
</caption>
<thead>
<th>
<tr style="color:blue;background-color:#eee;">
<td>帖子标题</td>
<td>作者</td>
<td>回贴数/点击数</td>
<td>最后回复</td>
</tr>
</th>
</thead>
<tbody>
<tr>
<td colspan="4" style="color:blue;background-color:#ccc;">论坛公告</td>
</tr>
<tr>
<td><span class="em">【NEW】</span><a href="#">保险平台新版上线！购商业险满1500元赠300元加油卡</a></td>
<td>社区快报员<br/>2011-06-15 </td>
<td>209/14381 </td>
<td>2011-6-16 22:11<br/>西北达人</td>
</tr>
<tr>
<td><span class="em">【随拍有礼】</span>随手拍汽车之家车标赢奖品—马上动起来！！</td>
<td>社区快报员<br/>2011-06-15 </td>
<td>31/1481 </td>
<td>2011-6-11 22:11<br/>西北达人</td>
</tr>
<tr>
<td><span class="em">【广州】</span>广汽传祺“三车”对比试乘试驾体验活动火热召集中 1 2 </td>
<td>经销商活动_广东<br/>2011-06-15 </td>
<td>11/201 </td>
<td>2011-6-16 22:11<br/>西北达人</td>
</tr>
<tr>
<td><span class="em">【沪】</span>汽车之家服务商上线_贴膜|美容|装饰|团购 </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" style="color:blue;background-color:#ccc;">版内置顶 </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><span class="em">【科普贴】</span>轮胎知识（更新） </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" style="color:blue;background-color:#ccc;">论坛主题</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><span class="em">【科普贴】</span>掀起黑车企的屁股帘，车企隐私大揭秘，大家都来长见识</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>
二、布局、UI和排版
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8">
<style type="text/css">
div,ul,li,img{
padding:0px;
margin:0px;
}
p {
font-size:12px;
font-famil: serif;
text-indent:2em;
line-height:160%;
}
ul,li {
list-style: none outside none;
}
#body_warp {
margin: 0 auto;
padding: 0 20px;
min-width:1000px;
}
.head{
height:100px;
}
#container {
width:100%;
position:relative;
overflow:hidden;
}
#left {
width: 100%;
position: relative;
}
#right {
position:relative;
overflow:hidden;
}
.sub_menu{
width:200px;
float:left;
}
.head{
height:50px;
}
.main_menu {
position:relative;
}
.menuItem {
float:right;
bottom:0px;
position:relative;
background:#ccc;
height:20px;
width: 50px;
}
.menuItem1 {
height:20px;
width: 150px;
border-bottom:1px solid #ccc;
}
.em {
color:red;
font-weight:bold;
}
.foot {
text-align:center;
}
</style>
</head>
<body>
<div id="body_warp">
<div class="head">
<ul class="main_menu">
<li class="menuItem">首页</li>
<li class="menuItem">新闻</li>
<li class="menuItem">下载</li>
<li class="menuItem">博客</li>
<li class="menuItem">论坛</li>
</ul>
</div>
<div id="container">
<div class="sub_menu">
<ul>
<li class="menuItem1">IT特快</li>
<li class="menuItem1">前沿技术</li>
<li class="menuItem1">最新资讯</li>
<li class="menuItem1">论坛活动</li>
<li class="menuItem1">设计师之家</li>
<li class="menuItem1">社会招聘</li>
<li class="menuItem1">任务悬赏</li>
</ul>
</div>
<div id="left">
<div id="right">
<div class="content">
<h1>2011年第六届中国元素国际创意大赛开始征稿啦！</h1>
<h5 style="font-weight:normal; color:#bdc;">来源：www.chineseelement.com 作者：www.chineseelement.com 发布日期：2011-05-30 209 次阅读 分享到: </h5>
<img src="./pic001.JPG" style="float:left;"></img>
<p>
关注中国元素的朋友，您好! <br/>
2011年第六届中国元素国际创意大赛开始征稿啦！
</P>
<p>
"中国元素国际创意大赛"发轫于2006年，是经中国国家工商总局批准，由中国广告协会主办，
清华大学、北京大学提供学术支持，是"中国国际广告节"的主体板块之一。五年来，大赛揣着中国文化、经济和人心向背的底气，
胸怀对中国乃至世界人类文明的责任，走过15座城市，115家院校；收到3587家公司踊跃共递交的24,562幅创意作品，
有着270,000篇新闻报道记录大赛的每一步成长。“中国元素国际创意大赛”是每个创意人才发挥想象的乐土，
是每个创意人才互相切磋的平台，是每个创意人才证明自己的起点。
</p>
<p>
往年的创意大赛主要是以“广告项”为主，其中包括：平面图形，影视动画，户外环境和电台广播，而今年的中国元素国际创意大赛在五年的强大蓄势后，合力再度出发，搭建了更大平台。今年首次引入了“设计项”包括：时尚服饰、产品造型、建筑设计，以及“营销项”包括：公共事件。而“广告项”也在原有的项目基础上增加了“互动体验”这个分类。 此外，今年的大赛将启用在线上传系统，您可以看见完整的评选过程，还可以邀请网络好友支持自己，支持数靠前可以提前入围哦！
扩大评选项目种类后的“中国元素国际创意大赛”为更多领域的创意人才提供了展现自我的平台，欢迎服装设计、工业设计、建筑设计，互动和公关领域的创意人才积极参加。如果您身边有这类人才，也可以推荐他参加大赛，将一颗颗喜爱中国文化的创意小星星汇聚起来，相互碰撞，激发出最璀璨的星空夜景。
如果您想得到同领域专业评委的指导，如果您想和同领域创意高手一较高低，那么请来参加“中国元素国际创意大赛”，递交作品，请随时关注：
</p>
<p><a href="http://www.chineseelement.com"><span class="em">大赛网站</span><a>
<a href="http://weibo.com/chineseelement"><span class="em">大赛新浪微博</span><a>期待您的参与！
<p>
中国元素国际创意大赛组委会
2011/5/18
</p>
</div>
</div>
</div>
</div>
<div class="foot">copy-right: **科技公司</div>
</div>
</body>
</html>
