原打算按照学习资料码一个网页首页的布局。可怎么也不能很好的搞好？ 栏目要分开。
html文件代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网站首页布局</title>
<link rel="stylesheet" href="layout.css" type="text/css"> <!-- 链接外部的css样式表 -->
</head>
<body>
<div id="container"> <!-- 最外层主盒子 -->
<div id="header"> <!-- 声明页头盒子 -->
<div id="logo" class="bgcolor">LOGO</div> <!-- 声明LOGO盒子 -->
<div id="banner"> <!-- 声明banner盒子 -->
<div id="left" class="bgcolor">BANNER1</div> <!-- 声明主banner盒子 -->
<div id="right" class="bgcolor">BANNER2</div> <!-- 声明次banner盒子 -->
</div>
</div>
<div class="nav"> </div> <!-- 作为分割盒子 -->
<div id="menu" class="bgcolor">水平导航条</div> <!-- 定义水平导航盒子 -->
<div class="nav"> </div>
<div id="content"> <!-- 声明主要内容盒子 -->
<div class="left_box border">栏目（一）</div> <!-- 第一个内容盒子 -->
<div class="right_box border">栏目（二）</div>
<div class="nav"> </div>
<div class="left_box"> <!-- 主体左部内容盒子 -->
<div class="left box">栏目（三）</div>
<div class="right box">栏目（四）</div>
</div>
<div class="right_box"> <!-- 主体右部内容盒子 -->
<div class="left box">栏目（五）</div>
<div class="right box">栏目（六）</div>
</div>
</div>
<div id="sidebox"> <!-- 右部边盒子 -->
<div id="bar border">栏目（七）</div>
<div class="nav"> </div>
<div id="bar border">栏目（八）</div>
<div class="nav"> </div>
<div id="bar border">栏目（九）</div>
</div>
<div class="nav"> </div>
<div id="footer" class="bgcolor">页脚</div> <!-- 页脚盒子 -->
</div>
</body>
</html>
css样式代码：
@CHARSET "UTF-8";
body{
margin:0;
padding:0;
text-align:center;
font:18px 微软雅黑;
}
.bgcolor{
background:#DDD;
}
#container{
width:960px;
margin:0 auto;
}
#header{
float:left;
width:100%;
}
#logo{
float:left;
width:200px;
height:80px;
}
#banner{
float:right;
width:750px;
}
#banner #left{
float:left;
width:540px;
height:80px;
}
.nav{
float:left;
height:10px;
width:100%;
overflow:hidden; /* 在ie中最小高度为18px，将超出的部分隐藏*/
clear:both; /* 消除该区块框两边的浮动区块*/
}
#banner #right{
float:right;
width:200px;
height:80px;
}
#menu{
float:left;
width:100%;
height:30px;
}
#sidebar{
float:right;
width:200px;
height:410px;
}
#sidebar.bar{
float:left;
width:100%; /* 设置该区块的宽度与上一层容器区块的宽度相同*/
height:130px;
}
#content{
float:left;
width:750px;
}
#content.left_box{
float:left;
width:370px;
height:200px;
}
#content.right_box{
float:right;
width:370px;
height:200px;
}
#content.left{
float:left;
width:200px;
height:180px;
}
#content.right{
float:right;
width:200px;
height:180px;
}
#footer{
float:left;
width:100%;
height:60px;
}
