网站的基本布局

<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">
/*整体容器设置*/
.allbody {
position:relative;
margin:auto;
top:0px;
100%;
height: 1500px;
z-index: 1;
background-color:#6FF;
}
/*头部*/
#bgtop
{
position: relative;
100%;
height: 150px;
z-index: 2;
background-color:#C63;
}
#top
{
position: relative;
margin:auto;
980px;
height: 150px;
z-index: 2;
background-color:#f0f;
}
#logo
{
position:absolute;
top:0px;
left:0px;
150px;
height:120px;
background-color:#939;

}
/*导航菜单*/
#bgnav {
position: absolute;
top:120px;
left:0px;
100%;
height: 30px;
z-index: 2;
background-color:#00F;
}
#nav {
position: relative;
margin:auto;
980px;
height: 30px;
z-index: 2;
background-color:#fff;
}
.xiala {
position: absolute;
left: 0px;
top: 30px;
97px;
height: 199px;
z-index: 2;
background-color:#00F;
}
.yincang {
position: relative;
float:left;
120px;
height: 30px;
z-index: 2;
background-color:#FF0;
overflow:hidden;
}

.xianshi {
position: relative;
float:left;
120px;
height: 30px;
z-index: 2;
background-color:#FF0;
overflow:visible;
}

/*开始banner动画制作*/
#banner
{
position: relative;
100%;
height: 400px;
z-index: 1;
background-color:#F0F;
}

/*列表div*/
#liebiaodiv
{
position: relative;
margin:auto;
980px;
height: 350px;
z-index: 1;
background-color:#FF6;
}

#hong
{
position: relative;
float:left;
320px;
height: 350px;
z-index: 1;
background-color:#f03;
}
#lvse
{
position: relative;
float:left;
left:5px;
320px;
height: 350px;
z-index: 1;
background-color:#0f3;
}
#lanse
{
position: relative;
float:left;
left:10px;
330px;
height: 350px;
z-index: 1;
background-color:#03f;
}

/*列表板块二div*/
.bankuairongqi
{
position: relative;
margin:auto;
980px;
height: 350px;
z-index: 1;
background-color:#FF6;
}

.bankuairongqi .hong
{
position: relative;
float:left;
320px;
height: 350px;
z-index: 1;
background-color:#f55;
}
.bankuairongqi .lvse
{
position: relative;
float:left;
left:5px;
320px;
height: 350px;
z-index: 1;
background-color:#5f5;
}
.bankuairongqi .lanse
{
position: relative;
float:left;
left:10px;
330px;
height: 350px;
z-index: 1;
background-color:#55f;
}
</style>
</head>

<body>

<div class="allbody">

<div id="bgtop">
<div id="top">

<div id="logo">
此处放logo

</div>

</div>
</div>


<div id="bgnav">
<div id="nav">
<div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
首页
<div class="xiala">
首页一<br />
首页二<br />
</div>
</div>
<div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
简介
<div class="xiala">
简介一<br />
简介二<br />
</div>
</div>

<div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
新闻
<div class="xiala">
新闻一<br />
新闻二<br />
</div>
</div>
<div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
招商
<div class="xiala">
招商一<br />
招商二<br />
</div>
</div>
<div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
首页
<div class="xiala">
首页一<br />
首页二<br />
</div>
</div>
</div>
</div>


<div id="banner">
此处放动画内容

</div>

<div id="liebiaodiv">

<div id="hong"></div>
<div id="lvse"></div>
<div id="lanse"></div>

</div>


<div class="bankuairongqi">

<div class="hong"></div>
<div class="lvse"></div>
<div class="lanse"></div>

</div>

</div>

</body>
</html>