网站的基本布局
<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;
width: 100%;
height: 1500px;
z-index: 1;
background-color:#6FF;
}
/*头部*/
#bgtop
{
position: relative;
width: 100%;
height: 150px;
z-index: 2;
background-color:#C63;
}
#top
{
position: relative;
margin:auto;
width: 980px;
height: 150px;
z-index: 2;
background-color:#f0f;
}
#logo
{
position:absolute;
top:0px;
left:0px;
width:150px;
height:120px;
background-color:#939;
}
/*导航菜单*/
#bgnav {
position: absolute;
top:120px;
left:0px;
width: 100%;
height: 30px;
z-index: 2;
background-color:#00F;
}
#nav {
position: relative;
margin:auto;
width: 980px;
height: 30px;
z-index: 2;
background-color:#fff;
}
.xiala {
position: absolute;
left: 0px;
top: 30px;
width: 97px;
height: 199px;
z-index: 2;
background-color:#00F;
}
.yincang {
position: relative;
float:left;
width: 120px;
height: 30px;
z-index: 2;
background-color:#FF0;
overflow:hidden;
}
.xianshi {
position: relative;
float:left;
width: 120px;
height: 30px;
z-index: 2;
background-color:#FF0;
overflow:visible;
}
/*开始banner动画制作*/
#banner
{
position: relative;
width: 100%;
height: 400px;
z-index: 1;
background-color:#F0F;
}
/*列表div*/
#liebiaodiv
{
position: relative;
margin:auto;
width: 980px;
height: 350px;
z-index: 1;
background-color:#FF6;
}
#hong
{
position: relative;
float:left;
width: 320px;
height: 350px;
z-index: 1;
background-color:#f03;
}
#lvse
{
position: relative;
float:left;
left:5px;
width: 320px;
height: 350px;
z-index: 1;
background-color:#0f3;
}
#lanse
{
position: relative;
float:left;
left:10px;
width: 330px;
height: 350px;
z-index: 1;
background-color:#03f;
}
/*列表板块二div*/
.bankuairongqi
{
position: relative;
margin:auto;
width: 980px;
height: 350px;
z-index: 1;
background-color:#FF6;
}
.bankuairongqi .hong
{
position: relative;
float:left;
width: 320px;
height: 350px;
z-index: 1;
background-color:#f55;
}
.bankuairongqi .lvse
{
position: relative;
float:left;
left:5px;
width: 320px;
height: 350px;
z-index: 1;
background-color:#5f5;
}
.bankuairongqi .lanse
{
position: relative;
float:left;
left:10px;
width: 330px;
height: 350px;
z-index: 1;
background-color:#55f;
}
</style>
</head>
<body>
<div class="allbody">
<!--top开始-->
<div id="bgtop">
<div id="top">
<!--logo布局-->
<div id="logo">
此处放logo
</div>
<!--logo布局结束-->
</div>
</div><!--top结束-->
<!-- 导航菜单开始 -->
<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><!--导航背景结束标记-->
<!--banner动画开始-->
<div id="banner">
此处放动画内容
</div><!--banner动画结束-->
<!--公司简介产品等布局-->
<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><!--allbody结束-->
</body>
</html>
