div简单布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="c.css">
</head>

<body>
<div id="banner">第一个</div>
<div id="content">
   <div id="left">1</div>
   <div id="center">2</div>
   <div id="right">3</div>
</div>
<div id="foot">第三个</div>
</body>
</html>

 

#banner,#content,#foot{width:750px;margin:0 auto}
#banner{
   height:150px;
   background:#ab0;
   border-top:1px solid #f00;
   padding-top:10px;
   padding-left:8px;
   margin-top:-10px;
   background-image:url(mao.jpg);
}
#content{
   height:200px;
   background:#fba;
   margin-top:5px;
 }
#foot{
   height:150px;
   background:#aca;
   margin-top:5px;
}
#left{
   width:150px;
   height:200px;
   float:left;
   border:1px solid #0ba;
   margin-right:5px;
}
#center{
   width:300px;
   height:200px;
   float:left;
   border:1px solid #f00;
   margin-right:5px;
}
#right{
   width:280px;
   height:200px;
   float:left;
   border:1px solid #0ff;
}


 

posted @ 2013-12-19 13:12  birdlow  阅读(337)  评论(0)    收藏  举报