html实战首页布局

1,432

阅读模式

html实战首页布局

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
       <title>实战首页布局</title>
    <meta http-equiv="Conrent-type" content="text/html;charset=gbk">
<meta name="description" content="实战首页布局">
    
    <style>
#container{
          width:1000px;
  background:gray;
         }
    #header{
       height:120px;
background:orange;
}
#main{
     height:600px;
 background:green;
}
#footer{
     height:120px;
 background:blue;
}
#lside{
   width:700px;
   float:left;
height:600px;
   background:pink;
}
#rside{
   width:300px;
   float:left;
height:600px;
   background:purple;     
}
</style>
         
</head>
      <body>
     
<div id="container">
   <div id="header"></div>
<div id="main">
   <div id="lside"></div>
<div id="rside"></div>
          </div>
<div id="footer"></div>
                    </div>
     </body>
</html>