网页固定布局模式 - 王xx

<!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">
body{
background:#999;
font:13px/1.5 Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#top{
background:#F69;
height:180px;
}
#top,#nav,#center,#bottom{
width:803px;
margin:0 auto;
}
#nav{
background:#0FC;
height:70px;
}
#center{
position:relative;
}
#center1{
background:#FC9;
height:700px;
width:204px;
float:left;
}
#l1{
  width:203px;
  height:140px;
  background:#6CC;
  float:left;
  }
   #l2{
  width:203px;
  height:140px;
  background:#6F9;
  float:left;
  }
   #l3{
  width:203px;
  height:140px;
  background:#9F9;
  float:left;
  }
   #l4{
  width:203px;
  height:140px;
  background:#9FC;
  float:left;
  }
   #l5{
  width:203px;
  height:140px;
  background:#CC6;
  float:left;
  }
   #c1{
  width:203px;
  height:140px;
  background:#6CC;
  float:left;
  }
   #c2{
  width:203px;
  height:140px;
  background:#66F;
  float:left;
  }
   #c3{
  width:203px;
  height:140px;
  background:#0FF;
  float:left;
  }
#center2{
background:#066;
height:700px;
width:599px;
float:left;
}
#bottom{
background:#00C;
height:106px;}

</style>
</head>

<body>
<div id="top"><h2>TOP</h2>
</div>
<div id="nav"><h2>nav</h2>
</div>
<div id="center">
<div id="center1">
<div id="l1">
<h2>left1</h2>
</div>
<div id="l2">
<h2>left2</h2>
</div>
<div id="l3">
<h2>left3</h2>
</div>
<div id="l4">
<h2>left4</h2>
</div>
<div id="l5">
<h2>left5</h2>
</div>
</div>
<div id="center2">
<div id="c1">
<h2>center1</h2>
</div>
<div id="c2">
<h2>center2</h2>
</div>
<div id="c3">
<h2>center3</h2>
</div>
</div>
</div>
<div id="bottom">
<h2>bottom</h2>
</div>
</body>
</html>

posted on 2011-11-04 08:57 王xx 阅读(195) 评论(0) 收藏举报

刷新页面返回顶部