今天一天调了两个主界面，另一个见《CSS+DIV练手-博客》 ，第一个用了5个小时，第二个仅仅用了1个半小时，看样子熟能生巧啊。
截图：
源代码：
<!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>CSS练手</title>
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #2A3A00;
margin: 0px;
padding: 0px;
}
#main{
position: absolute;
top: 10%;
left: 0%;
width: 100%;
background: url(middle_bg.jpg) repeat-x;
}
#main img{
border:0px;
}
#info{
position:absolute;
top:55%;
left:40%;
width:200px;
}
#info a:hover{
color: #2A3A00;
text-decoration: none;
}
#info a:link,#info a:visited{
color:#FFFFFF;
text-decoration: none;
}
#menu{
position:absolute;
top:65%;
left:40%;
width:200px;
}
#menu ul li{
position:relative;
left:-40px;
list-style-type:none;
width:100px;
padding-left:20px;
background:url(icon1.gif) no-repeat 4px 7px;
}
#menu ul li a:hover {
color: white;
text-decoration: none;
}
#menu ul li a:link,#menu ul li a:visited{
color: #2A3A00;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<a href="index.html"><img src="index.jpg"></a>
</div>
<div id="info">
<a href="index.html">思想和文化的交流始于文字，我们以新颖而行之有效的方式为您提供实际的服务。</a>
</div>
<div id="menu">
<ul>
<li><a href="index.html">进入首页</a></li>
<li><a href="index.html">关于我们</a></li>
<li><a href="index.html">服务流程</a></li>
<li><a href="index.html">合作伙伴</a></li>
</ul>
</div>
</div>
</body>
</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>css练手</title>
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #2A3A00;
margin: 0px;
padding: 0px;
text-align:center;
}
#container{
position:relative;
margin:1px auto 0px auto;
width:640px;
text-align:left;
background:#FFFFFF url(left_bg.jpg) repeat-y;
/* 修补#navigation的背景色问题 */
}
#menu{
width:150px;
float:left;
}
#menu ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#menu ul li
{
border-bottom: 1px solid #B9FF00;
}
#menu ul li a {
display:block; /* 区块显示,非常重要 */
padding: 5px 5px 5px 0.5em;
text-decoration: none;
border-left: 12px solid #3C5300;
border-right: 1px solid #3C5300;
}
#menu ul li a:link, #menu ul li a:visited {
background-color: #729E00;
color: white;
}
#menu ul li a:hover{
background-color:#587a00;
color:#ffff00;
}
#main{
float: left;
width: 460px;
margin: 10px 15px 35px 15px;
}
#main h3{
font-size:15px;
margin:0px 0px 10px 0px;
padding:10px 0px 1px 0px;
border-bottom:1px dotted #777777;
}
#main a:link, #main a:visited{
color:#afcd00;
text-decoration:none;
}
#main a:hover{
color:#000000;
text-decoration:underline;
}
#footer{
clear:both;
text-align:center;
background-color:#c7db51;
margin:0px; padding:1px;
}
#footer a:link, #footer a:visited{
color:#475300;
text-decoration:none;
}
#footer a:hover{
color:#000000;
text-decoration:underline;
}
/*注意：hover必须放在link和visited的后面，否则鼠标划上去没有效果*/
</style>
</head>
<body>
<div id="container">
<div id="banner">
<img src="banner.jpg">
</div>
<div id="menu">
<ul>
<li><a href="index.html">进入首页</a></li>
<li><a href="index.html">关于我们</a></li>
<li><a href="index.html">服务流程</a></li>
<li><a href="index.html">合作伙伴</a></li>
</ul>
</div>
<div id="main">
<h3>为您提供精准的翻译服务</h3>
<p>您是否要将某些文档翻译成标准的英语版本？您是否担心译文会不符合西方语系的语言习惯？您是否遇到语言障碍而放缓向境外拓展业务的步伐？您是否受到时而需要处理外文资料的困扰？</p>
<p>让我们来帮您解决这些问题。我们这里提供的服务<a href="page3.html">快捷</a> 、高效、准确，而且<a href="page4.html">付费</a>方便。您无需走出家门，就可同我们一起走完服务的全过程，甚至包括付费。</p>
<p>我们有来自中国和新加坡的翻译专家，他们具有得天独厚的语言基础和深厚的文化背景。他们合作的结晶一定是非常贴切而精美的译文作品。我们会分配以您的目标语种为 母语 的翻译员为你翻译，同时他们也 精通 您的源语语种。</p>
<p>您若有此需求或任何疑问，请浏览我们的网站，也可随时同我们联系，您会得到耐心的解答。我们的联系方式是: <a href="mailto:demo@demo.com">demo@demo.com</a>。</p>
</div>
<div id="footer"><a href="#">联系我们: demo@demo.com</a>
</div>
</div>
</body>
</html>
做这些就是为了CSS+DIV熟练掌握