<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="banner"></div>
<div id="custom"></div>
</div>
<div class="nav"></div><!--間隔 -->
<div id="meun">
<ul>
<li><a href="">首頁</a></li>
<li><a href="">娛樂</a></li>
<li><a href="">軍事</a></li>
<li><a href="">社會</a></li>
<li><a href="">新聞</a></li>
<li><a href="">閱讀</a></li>
</ul>
</div>
<div class="nav"></div><!--間隔 -->
<div id="main">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
<div id="content5"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
css////
body{
padding:0;
margin:0;
text-align:center;
}
#container{
width:960px;
/*height:900px;*/
/*background:olive;*/
border:1px solid black;
margin-left:auto;
margin-right:auto;
}
/*----------------------------------------------------------------*/
#header{
width:100%;
height:80px;
/*background:pink;*/
}
#logo{
float:left;
width:200px;
height:100%;
background:orange;
margin-right:10px;
}
#banner{
float:left;
width:600px;
height:100%;
background:yellow;
}
#custom{
float:right;
width:140px;
height:100%;
background:lightblue;
}
#meun{
float:left;
width:100%;
height:30px;
background:#ccc;
font-size:14px;
}
ul{ margin:0px;
padding:0px;
list-style:none;
}
li{
float:left;
padding-top:8px;
padding-bottom:5px;
padding-left:30px;
padding-right:30px;
}
/*------------------------------------------------------------*/
#main{
width:100%;
height:600px;
/*background:blue;*/
}
#content1{
float:left;
width:350px;
height:290px;
margin-right:10px;
background:blue;
}
#content2{
float:left;
width:350px;
height:290px;
background:blue;
}
#content3{
float:right;
width:240px;
height:590px;
background:blue;
}
#content4{
float:left;
width:350px;
height:290px;
margin-top:10px;
margin-right:10px;
background:blue;
}
#content5{
float:left;
width:350px;
height:290px;
margin-top:10px;
margin-right:10px;
background:blue;
}
/*-------------------------------------------------------------*/
#footer{
float:left;
width:100%;
height:60px;
background:green;
}
.nav{
width:100%;
height:10px;
overflow:hidden;/*兼容IE */
}
a{
text-decoration:none;
}