（一个固定宽度div布局）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
body{
font:"幼圆";
text-align:center;
font-weight:bold;
font-size:18px;
}
#header,#content,#footer{
margin:0 auto;
padding:0;
width:800px;
}
#header #top1{
background-color:#069;
line-height:6em;}
#header #top2{
background-color:#06C;
line-height:3em;}
#leftlist{
background-color:#099;
width:250px;
float:left;
padding:0px;
margin:0px;
}
#leftlist #list1{
background-color:#060;
height:158px;
}
#leftlist #list2{
background-color:#9CF;
height:158px;
}
#leftlist #list3{
background-color:#060;
height:158px;
}
#leftlist #list4{
background-color:#9cf;
height:158px;
}
#leftlist #list5{
background-color:#060;
height:157px;
}
#rightlist{
width:550px;
float:left;
padding:0px;
margin:0px;}
#rightlist1{
height:40px;
background-color:#36F;}
#rightlist2 {
height:150px;
background:#39c;}
#rightlist2 #rl1{
width:200px;
background:#69f;
height:150px;
float:left;}
#rightlist2 #rl2{
width:350px;
float:left;
background:#6C9;}
#rightlist3{
height:40px;
background:#9C9;
width:550px;}
#rightlist4{
width:550px;
padding:5px;
margin:0px;}
#rightlist4 #rg1{
width:250px;
background:#9F0;
height:150px;
float:left;
padding:5px 10px 10px 10px;
}
#rightlist4 #rg2{
width:250px;
background:#9F3;
height:150px;
float:left;
padding:5px 10px 10px 10px;
}
#rightlist4 #rg3{
width:250px;
background:#9F6;
height:150px;
float:left;
padding:5px 10px 10px 10px;
}
#rightlist4 #rg4{
width:250px;
background:#9F9;
height:150px;
float:left;
padding:5px 10px 10px 10px;
}
#rightlist4 #rg5{
width:250px;
background:#9Fc;
height:150px;
float:left;
padding:5px 10px 10px 10px;
}
#rightlist4 #rg6{
width:250px;
background:#9fF;
height:150px;
float:left;
padding:5px 10px 10px 10px;
}
#rightlist4 #rg7{
width:250px;
background:#CFF
height:150px;
float:left;
padding:5px 10px 10px 10px;
}
#rightlist4 #rg8{
width:250px;
background:#cfc;
height:150px;
float:left;
padding:5px 10px 10px 10px;
}
#rightlist5{
width:550px;
height:100px;
background:#9CC;
float:right;
}
h3{
background-color:#09F;}
h2{
background:#69F;}
#footer{
background:#ccc;
width:800px;
line-height:6em;
}
</style>
</head>
<body>
<div id="header">
<div id="top1">Top</div>
<div id="top2">
导航
</div>
</div>
<div id="content">
<div id="leftlist">
<div id="list1">
<h3><strong>通知公告</strong></h3>
通知公告信息</div>
<div id="list2">
<h3> 校内办公系统</h3>
<p>登陆</p>
<p> 注册 </p>
</div>
<div id="list3">
<h3>招生栏</h3>
<p>招生信息</p>
</div>
<div id="list4">
<h3>联系邮箱</h3>
<p>邮箱地址</p>
</div>
<div id="list5">
<h3>友情链接</h3>
教育网站
</div>
</div>
<div id="rightlist">
<div id="rightlist1">
新闻中心
</div>
<div id="rightlist2">
<div id="rl1">
图片新闻
</div>
<div id="rl2">
最新报道
</div>
</div>
<div id="rightlist3">
分类新闻
</div>
<div id="rightlist4">
<div id="rg1">
<h2>标题1</h2>
列表内容
</div>
<div id="rg2">
<h2>标题2</h2>
列表内容
</div>
<div id="rg3">
<h2>标题3</h2>
列表内容
</div>
<div id="rg4">
<h2>标题4</h2>
列表内容
</div>
<div id="rg5">
<h2>标题5</h2>
列表内容
</div>
<div id="rg6">
<h2>标题6</h2>
列表内容
</div>
<div id="rg7">
<h2>标题7</h2>
列表内容
</div>
<div id="rg8">
<h2>标题8</h2>
列表内容
</div>
</div>
<div id="rightlist5">
<p>校园相册展示 </p>
</div>
</div>
</div>
<div id="footer">
<div id="foot">Footer</div>
</div>
</body>
</html>
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
