简单格式布局
STYLE部分代码
<style type="text/css">
body{
margin:0;
padding:0;}
##a,#b,#c,#d,#e,#f,#g{
width:1000px;
margin:0 auto;}
#a{
background:#F9F;
height:20px;
}
#b{
background:#CF6;
height:70px;}
#c{
background:#FF9;
height:130px;}
#d{
background:#CFC;
height:880px;
}
#d1{
background:#9CF;
height:880px;
width:200px;
float:left;}
#dd{background:#CC6;
height:180px;}
#dd1{
background:#FC9;
height:280px;}
#dd2{
background:#9F9;
height:320px;}
#dd3{background:#6FC;
height:100px;}
#d2{
background:#000;
height:880px;
width:500px;
float:left}
#w1{background:#CFF;
height:150px;}
#i{
background:#FF9;
width:400px;
height:20px;
border:1px red solid;}
#i2{
background:#FF9;
width:300px;
height:20px;
border:1px red solid;
float:right;
}
#k{
background:#FF9;
height:100px;
width:30px;
text-align:center;
border:1px red solid;}
#w2{background:#CCC;
height:80px;}
#w3{background:#99F;
height:200px;
}
#w4{background:#CC9;
height:170px;}
#w5{background:#CFF;
height:190px;}
#w6{background:#F99;
height:90px;}
#d3{
height:880px;
width:200px;
float:left;}
#q{
height:180px;}
#q1{
background:#FC9;
height:420px;}
#q2{background:#F6F;
height:280px;}
#e{
height:880px;}
#t{
height:440px;
background:#CFC;
}
#u{
height:440px;
background:#CFC;}
#ee1{
background:#9FF;
height:440px;
width:300px;
float:left;
}
#ee2{
background:#9CF;
height:440px;
width:300px;
float:left;}
#ee3{
background:#6CF;
height:440px;
width:300px;
float:left;}
#ee4{
background:#9C6;
height:440px;
width:300px;
float:left;}
#ee5{
background:#CC9;
height:440px;
width:300px;
float:left;}
#ee6{
background:#CCF;
height:440px;
width:300px;
float:left;}
#f{
background:#FF6;
height:20px;
}
#g{
background:#6FC;
height:70px;}
h3{
margin:0px;
background:#CF3;
width:300px;
height:30px;}
h4{
margin:0px;
background:#CF3;
width:200px;
height:30px;}
#o{
height:500px;
width:80px;
border:#F00 1px solid;
float:left;}
</style>
HTML部分代码
<body>
<div id="a">链接</div>
<div id="b">导航</div>
<div id="c">全国第一家复合式网校</div>
<div id="d">
<div id="d1">
<div id="dd">
<h4>中学登录</h4></div>
<div id="dd1"><h4>学习</h4></div>
<div id="dd2"><h4>学员来信</h4></div>
<div id="dd3">图片</div>
</div>
<div id="d2">
<div id="w1">
<div id="i">跑马灯</div></div>
<div id="w2">全国分校</div>
<div id="w3">
<div id="l"></div><div>
<div id="i2">分校动态</div></div>
</div>
<div id="w4"><div id="k">名师风采</div></div>
<div id="w5">
<div id="i">网上课堂演示</div></div>
<div id="w6"><div id="i">高考冲刺班演示</div></div>
</div>
<div id="d3">
<div id="q"><h4>学生登录</h4></div>
<div id="q1">
<h4>小学课堂</h4></div>
<div id="q2">图片</div>
</div>
<div id="o">广告区</div>
</div>
<div id="e">
<div id="t">
<div id="ee1">
<h3>互动学习</h3></div>
<div id="ee2"> <h3>黄冈试卷</h3></div>
<div id="ee3">
<h3>学法指导</h3></div>
</div>
<div id="u">
<div id="ee4">
<h3>黄冈擂台</h3></div>
<div id="ee5">
<h3>家长学校</h3></div>
<div id="ee6">
<h3>新教师板</h3></div>
</div>
</div>
<div id="f">友情链接</div>
<div id="g">版权内容</div>
</body>
