练习，已达到熟练的运动div布局，代码如下：
<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">
#top,#header,#banner,#content,#footer,#footer1,#footer2{
width:1003px;
margin:0 auto;
}
#top{
background-color:#CCC;
height:30px;
padding:5px 0 0 0;
font-size:12px;
}
#header{
background-color:#06F;
height:74px;
border-top:4px #F60 solid;
margin-bottom:1px;
}
#banner{
border-top:4px #F60 solid;
background-color:#FC0;
height:130px;
}
#contleft{
width:900px;
height:1480px;
float:left;
}
#contright{
width:100px;
height:1480px;
border:1px solid #000;
background-color:#FFC;
float:right;
}
#left{
width:200px;
height:900px;
float:left;
border:solid 1px #999;
}
#cont{
width:494px;
height:900px;
float:left;
border:solid 1px #000;
}
#right{
width:200px;
height:900px;
float:right;
border:solid 1px #999;
}
h3{
background-color:#969;
}
#left1{
background-color:#CCC;
width:200px;
border:solid 1px #666;
height:173px;
margin:0px;
}
#left2{
background-color:#9F3;
width:200px;
height:70px;
margin:-15px 0 0 0;
}
#left3{
background-color:#CCC;
width:200px;
height:650px;
margin:-20px 0 0 0;
padding:0px 0 0 0;
}
#left4{
background-color:#3CC;
width:200px;
height:225px;
margin:0px 0 0 0;
}
h4{
background-color:#F90;
}
#left5{
background-color:#3CC;
width:200px;
height:318px;
margin:-20px 0 0 0;
}
#left6{
width:200px;
height:95px;
margin:-15px 0 0 0;
}
h2{
background-color:#9C0;
height:70px;
padding:10px;
}
#cont1{
height:160px;
width:494px;
padding:5px 5px 0 0;
margin:0px;
}
#cont2{
height:160px;
width:330px;
float:left;
background-color:#CC0;
}
#cont3{
height:160px;
width:164px;
background-color:#C30;
float:right;
}
#cont4{
height:78px;
width:474px;
margin:-10px 0 0 0;
padding:0 10px 0 10px;
}
#cont4 p{
border-bottom:solid 2px #F30;
border-top:solid 2px #F30;
height:78px;
padding:0 10px 0 10px;
}
#cont5{
width:474px;
height:192px;
padding:10px 10px 10px 10px;
text-align:center;
margin:0 0 5px 0;
}
#cont6{
height:120px;
width:120px;
background-color:#C90;
text-align:center;
margin:30px 0 0 0;
float:left;
}
#cont7{
height:192px;
width:350px;
background-color:#FC9;
float:right;
}
#cont8{
height:162px;
width:474px;
margin:-15px 0 0 10px;
}
#cont8 p{
border-top:solid 2px #F30;
height:162px;
background-color:#F96;
padding:0 10px 0 10px;
}
#cont9{
height:168px;
width:474px;
margin:-15px 0 0 10px;
}
#cont9 h3{
background-color:#FFF;
border-bottom:solid 1px #999;
border-left:3px #F60 solid;
}
#cont9 p{
height:172px;
border:solid 1px #CCC;
background-color:#FCC;
padding:0 10px 0 10px;
margin:-15px 0 0 0px;
}
#cont10{
height:100px;
width:474px;
margin:-15px 0 0 10px;
}
#cont10 h4{
background-color:#FFF;
border-bottom:solid 1px #999;
border-left:3px #F60 solid;
}
#cont10 p{
height:60px;
border:solid 1px #CCC;
background-color:#FCC;
padding:0 10px 0 10px;
margin:-15px 0 0 0px;
}
#right1{
height:628px;
width:180px;
background-color:#CCC;
margin:5px 0 0 0;
padding:10px;
}
#right2{
height:143px;
width:180px;
background-color:#FC0;
margin:-15px 0 0 0;
}
#right3,#right4,#right5{
height:40px;
background-color:#FFF;
border:solid 1px #999;
margin:5px 0 0 0;
}
#right3 h3,#right4 h3,#right5 h3{
background-color:#fff;
}
#right6{
height:230px;
width:180px;
margin:-15px 0 0 0;
}
#right6 h3{
color:#F30;
background-color:#CCC;
}
#right6 p{
background-color:#FFF;
border:solid 1px #999;
width:180px;
height:220px;
margin:-3px 0 0 0;
}
#right6 h4{
color:#F30;
background-color:#FFF;
margin:-20px 0 5px 0;
height:30px;
border:solid 1px #999;
padding:4px 0 0 0;
}
#right7{
height:40pxpx;
width:180px;
background-color:#3C0;
border:solid 1px #999;
margin:55px 0 0 0;
}
#right7 h3{
background-color:#3C0;
}
#contionter1{
width:903px;
height:580px;
}
#nav1,#nav2,#nav3,#nav4,#nav5,#nav6{
height:273px;
width:275px;
border:solid 1px #999;
padding:0px 5px 5px 5px;
background-color:#9CF;
margin:10px 0 0 0;
}
#nav1{
float:left;
}
#nav2{
float:left;
margin-left:20px;
}
#nav3{
float:right;
}
#nav4{
float:left;
}
#nav5{
float:left;
margin-left:20px;
}
#nav6{
float:right;
}
#nav1 h3,#nav2 h3,#nav3 h3,#nav4 h3,#nav5 h3,#nav6 h3{
height:40px;
width:275px;
background-color:#9CF;
margin:0 0 10px 0;
padding:5px 0 0 0;
}
#nav1 h3{
border-left:solid 4px #F00;
}
#nav2 h3{
border-left:solid 4px #FC0;
}
#nav3 h3{
border-left:solid 4px #069;
}
#nav4 h3{
border-left:solid 4px #606;
}
#nav5 h3{
border-left:solid 4px #3C0;
}
#nav6 h3{
border-left:solid 4px #F09;
}
#footer{
height:40px;
background-color:#FFC;
border:solid 1px #CCC;
clear:both;
}
#footer1{
height:60px;
background-color:#069;
border-bottom:solid 4px #F60;
clear:both;
}
#footer2{
height:30px;
border:solid 1px #CCC;
clear:both;
}
</style>
</head>
<body>
<div id="top">太奇教育</div>
<div id="header">导航</div>
<div id="banner">banner</div>
<div id="content">
<div id="contleft">
<div id="contionter">
<div id="left">
<div id="left1"><h3>中学课堂</h3></div>
<div id="left2"><h3>名师</h3></div>
<div id="left3">
<div id="left4"><h4>黄冈之星</h4></div>
<div id="left5"><h4>学员来信</h4></div>
<div id="left6"><h2>直播课堂</h2></div>
</div>
</div>
<div id="cont">
<div id="cont1">
<div id="cont2">
<table width="330" height="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20">热点聚焦</td>
<td width="330"> </td>
</tr>
</table>
</div>
<div id="cont3">图片新闻</div>
</div>
<div id="cont4"><p>全国分校</p></div>
<div id="cont5">
<div id="cont6">百年名校</div>
<div id="cont7">
<h3>分校风采</h3>
</div>
</div>
<div id="cont8"><p>名师风采</p></div>
<div id="cont9"><h3>网上课堂演示</h3>
<p>内容</p>
</div>
<div id="cont10"><h4>高考冲刺班演示</h4>
<p>内容</p>
</div>
</div>
<div id="right">
<div id="left1"><h3>小学课堂</h3></div>
<div id="left2"><h3>新教师版</h3></div>
<div id="right1">
<div id="right2"><h3>加盟合作</h3></div>
<div id="right3"><h3>全国中学生大联考</h3></div>
<div id="right4"><h3>只能测评</h3></div>
<div id="right5"><h3>常用软件</h3></div>
<div id="right6">
<h3>热点调查</h3>
<h4>你最爱的辅导方式是</h4>
<p>内容</p>
</div>
<div id="right7"><h3>高考冲刺班</h3></div>
</div>
</div>
</div>
<div id="contionter1">
<div id="nav1"><h3>互动学习</h3>
内容
</div>
<div id="nav2"><h3>黄冈密卷</h3>
内容
</div>
<div id="nav3"><h3>学法指导</h3>
内容
</div>
<div id="nav4"><h3>黄冈擂台</h3>
内容
</div>
<div id="nav5"><h3>家长学校</h3>
内容
</div>
<div id="nav6"><h3>新教师版</h3>
内容
</div>
</div>
</div>
<div id="contright"></div>
</div>
<div id="footer">友情连接</div>
<div id="footer1">联系我们</div>
<div id="footer2"><img src="11.jpg" /></div>
</body>
</html>
由于效果图太大，所以如果想看到效果的话，自己贴代码。本人刚学，水平不行，所以可能写得比较啰嗦，也希望海涵。
