CSS+div页面布局（动态页面设置）

<!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{
padding:0;
margin:0 auto;
}
#header,#header1,#header2,#content,#lianjie,#footer{
width:1004px;
}
#header{
height:34px;
background-color:#FF0000;
}
#header1{
height:70px;
background-color:#CC0066;
}
#header2{
height:129px;
background-color:#CC0099;
}

#top_left{
float:left;
}
#left1{
height:175px;
width:200px;
background-color:#FF3300;
}
#left2{
width:200px;
height:65px;
background-color:#FF3366;
}
#left3{
height:211px;
width:200px;
background-color:#FF6699;
}
#left4{
width:200px;
height:332px;
background-color:#FF33FF;
}
#left5{
width:200px;
height:120px;
background-color:#FF6600;
}

#top_center{
width:500px;
float:left;
}
#center1{
height:163px;
background-color:#FF6633;
}
#center2{
height:82px;
background-color:#FFCC00;
}
#center3{
height:190px;
background-color:#003300;
}
#center4{
height:142px;
background-color:#003333;
}
#center5{
height:222px;
background-color:#006699;
}
#center6{
height:104px;
background-color:#0033FF;
}
#top_right{
width:200px;
float:left;
}
#right1{
height:175px;
background-color:#006600;
}
#right2{
height:63px;
background-color:#006699;
}
#right3{
height:339px;
background-color:#009900;
}
#right4{
height:269px;
background-color:#009966;
}
#right5{
height:57px;
background-color:#0099FF;
}

#bottom1{
width:308px;
height:290px;
float:left;
background-color:#00FF00;
}
#bottom2{
width:300px;
height:290px;
float:left;
background-color:#00FF66;
}
#bottom3{
width:292px;
height:290px;
float:left;
background-color:#990000;
}
#bottom4{
width:308px;
height:287px;
float:left;
background-color:#990033;
}
#bottom5{
width:300px;
height:287px;
float:left;
background-color:#990066;
}
#bottom6{
width:292px;
height:287px;
float:left;
background-color:#9900CC;
}
#lianjie{
background-color:#996600;
}

#lj{
    width:1004px;
    height:50px;
float:left;
background-color:#663399;
}
#footer{
   width:1004px;
   height:65px;
   float:left;
   background-color:#996666;
}
</style>
<body>
<div id="header">这是头</div>
<div id="header1">这是导航</div>
<div id="header2">这是标题</div>
<div id="content">

</div>
<div id="lianjie"></div>
<div id="lj">友情链接</div>
<div id="footer">联系方式</div>
</body>
</html>

posted @ 2011-11-07 08:38 威德尔海豹阅读(831) 评论(0) 收藏举报

刷新页面返回顶部

CSS+div页面布局（动态页面设置）

公告