CSS+DIV网页布局（黄冈网校首页布局）示例代码-CSDN博客

<!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>无标题文档</title>
<style type="text/css">
#main,#header,#banner,#content,#container,#footer{
background-color:#399;
width:1003px;
border:1px solid red;
}
#main{
  width:1003px;
  height:29px;
  }
#header{
  width:1003px;
  height:75px;
  }
#banner{
  width:1003px;
  height:129px;
  }
#content{
  width:1003px;
  height:904px;
  }
  #left{
   width:199px;
   height:904px;
   float:left;
   background-color:#096;
   }
  #left1{
   width:199px;
   height:173px;
   }
  #left2{
   width:199px;
   height:71px;
   }
  #left3{
   width:199px;
   height:206px;
   }
  #left4{
   width:199px;
   height:338px;
   }
  #left5{
   width:199px;
   height:116px;
   }
#center{
  background-color:#336;
  border:1px solid blue;
  float:left;
  width:501px;
  height:904px;
  }
#center1{
  height:158px;
  width:501px;
  }
#center2{
  width:501px;
  height:77px;
  }
#center3{
  width:501px;
  height:194px;
  }
#center4{
  width:501px;
  height:151px;
  }
#center5{
  width:501px;
  height:217px;
  }
#center6{
  width:501px;
  height:107px;
  }
#right{
  width:300px;
  height:906px;
  background-color:#339;
  float:right;
  }
#right1{
  width:300px;
  height:173px;
  }
#right2{
  width:300px;
  height:62px;
  }
#right3{
  width:198px;
  height:147px;
  }
#right4{
  width:198px;
  height:68px;
  }
#right5{
  width:198px;
  height:59px;
  }
#right6{
  width:198px;
  height:71px;
  }
#right7{
  width:198px;
  height:267px;
  }
#right8{
  width:198px;
  height:57px;
  }

#container1{
  width:310px;
  height:288px;
  float:left;
  background-color:#069;
  }
#container2{
  width:298px;
  height:288px;
  float:left;
  background-color:#069;
  }
#container3{
  width:395px;
  height:288px;
  float:left;
  background-color:#069;
  }
#container4{
  width:310px;
  height:287px;
  float:left;
  background-color:#069;
  }
#container5{
  width:298px;
  height:287px;
  float:left;
  background-color:#069;
  }
#container6{
  width:395px;
  height:287px;
  float:left;
  background-color:#069;
  }
#footer{
  width:1003px;
  height:97px;
  background-color:#336;
  }

</style>
</head>

<body>
<div id="main">太奇教育</div>
<div id="header">太奇教育旗下品牌网站</div>
<div id="banner">全国第一家复合式网校</div>
<div id="content">
<div id="top"></div>
<div id="left">
<div id="left1">中学课堂</div>
<div id="left2">名师寄语</div>
<div id="left3">黄冈之星</div>
<div id="left4">学员来信</div>
<div id="left5">直播课堂</div>
</div>
<div id="center">
<div id="center1">热点聚焦</div>
<div id="center2">全国分校</div>
<div id="center3">分校动态</div>
<div id="center4">名师风采</div>
<div id="center5">网上课堂演示</div>
<div id="center6">高考冲刺班演示</div>
</div>
<div id="right">
<div id="right1">小学课堂</div>
<div id="right2">新教师版</div>
<div id="right3">加盟合作</div>
<div id="right4">全国中学生网上大联考</div>
<div id="right5">智能测评</div>
<div id="right6">常用软件</div>
<div id="right7">热点调查</div>
<div id="right8">高考冲刺班</div>
</div>
</div>
<div id="container">
<div id="container1">互动学习</div>
<div id="container2">黄冈密卷</div>
<div id="container3">学法指导</div>
<div id="container4">黄冈擂台</div>
<div id="container5">家长学校</div>
<div id="container6">新教师版</div>
</div>
<div id="footer">友情链接</div>
</body>
</html>