margin首页实战首页布局

  • 830

margin首页实战首页布局

<!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:1002px;
   background:gray;
         }
#header{
   height:120px;
   background:orange;/*橘色*/
}
#main{
   height:600px;
   background:green/*绿色*/;
}
#lside{
   width:700px;
   height:600px;
   float:left;
   background:pink;/*粉色*/
   }
.four{
      height:280px;
      width:330px;
      background:black;/*黑色*/
      float:left;
      margin:10px;
   }
#rside{
   width:302px;
   height:600px;
   float:right;
   background:purple;   /*紫色*/  
}
#footer{
   height:120px;
   width:1002px;
   background:blue;  /*蓝色*/
}
</style>
          
</head>
      <body>
      
<div id="container">
   <div id="header"></div>
   <div id="main">
      <div id="lside">
       <div class="four"></div>
       <div class="four"></div>
       <div class="four"></div>
       <div class="four"></div>
       </div>
            
      <div id="rside"></div>
         
          </div>
   <div id="footer"></div>
                    </div>
     </body>
</html>

 

weinxin
我的微信
这是我的微信扫一扫
html最后更新:2016-9-23
开拓者博主
  • 本文由 发表于 2016年6月3日21:50:34
  • 转载请务必保留本文链接:https://www.150643.com/33.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: