效果图:
代码:(以下两个文件名可自行修改)
html文件-----demo8_8.html(文件名)
<!--P152页 10.1.3-->
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="demo8_8.css">
</head>
<body>
<div id="container" class="">
<div id="header" class="">
<div id="logo" class="">logo</div>
<div id="nav" class="">nav</div>
</div>
<div id="main" class="">
<div id="left" class="">
<div id="left_up_1" class="">left_up_1</div>
<div id="left_up_2" class="">left_up_2</div>
<div id="left_down_1" class="">left_down_1</div>
<div id="left_down_2" class="">left_down_2</div>
</div>
<div id="center" class="">
<div id="center_up" class="">center_up</div>
<div id="center_down" class="">center_down</div>
</div>
<div id="right" class="">
<div id="right_up" class="">right_up</div>
<div id="right_down" class="">right_down</div>
</div>
</div>
</div>
</div>
</body>
</html>
css文件----demo8_8.css(文件名)
*{
font-size: 16px;margin: 0 auto;padding: 0px;
}
#container{
background: #334455;width: 100%; height: 700px;
}
#header{
background: #FF4455;width: 100%;height: 150px;
}
#logo{
background: #FFDD55;width: 100%;height: 100px;
}
#nav{
background: #ffdd99;width: 100%; height: 50px;
}
#main{
background: #33DD55;width: 100%;height: 500px;
}
#left{
background: #33FBFB;width: 33%;height: 100%;float: left;
}
#left_up_1{
background: #99BBDD;width: 100%;height: 125px;
}
#left_up_2{
background: #AABBCC;width: 100%;height: 125px;
}
#left_down_1{
background: #BBCCDD;width: 100%;height: 125px;
}
#left_down_2{
background: #CCDDEE;width: 100%;height: 125px;
}
#center{
background: #88FBFB;width: 34%;height: 100%;float: left;
}
#center_up{
background: #66FF66;width: 100%;height: 200px;
}
#center_down{
background: #45DD22;width: 100%;height: 200px;
}
#right{
background: #DDFBFB;width: 33%;height: 100%;float: left;
}
#right_up{
background: #55DDFB;width: 100%;height: 150px;
}
#right_down{
background: #667733;width: 100%;height: 300px;
}
#footer{
background: #DDDD11;width: 100%;height: 50px;
}