看下这个用DVD仿框架布局的效果图：
下面是设计的源代码：
html部分：
Code
[http://www.xueit.com]
<!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>
</head>
<link href="CSS/css.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<div class="header">
<div class="header_top">
<div class="logo"><img src="images/logo.jpg" alt="ESD LOGO" width="136" height="82" title="ESD LOGO"/></div>
<div class="menu">
<ul class="menu_image">
<li class="tu"><img src="images/forum_new.gif" /></li>
<li class="tu"><img src="images/forum_new.gif" /></li>
<li class="tu"><img src="images/forum_new.gif" /></li>
<li class="tu"><img src="images/forum_new.gif" /></li>
<li class="tu"><img src="images/forum_new.gif" /></li>
<li class="tu"><img src="images/forum_new.gif" /></li>
<li class="tu"><img src="images/forum_new.gif" /></li>
</ul>
<ul class="menu_text">
<li class="zi">系统设置</li>
<li class="zi">用户管理</li>
<li class="zi">栏目管理</li>
<li class="zi">栏目管理</li>
<li class="zi">栏目管理</li>
<li class="zi">栏目管理</li>
<li class="zi">栏目管理</li>
</ul>
<div class="clearboth"></div>
</div>
<div class="person">
<ul>
<li>2009年11月8日星期三</li>
<li>角色：系统管理员</li>
<li>用户名：系统管理员 </li>
</ul>
</div>
<div class="state">
<p>注销</p>
</div>
<div class="disappear"></div>
<div class="clearboth"></div>
</div>
<div class="header_bottom">
<span class="h_b_left">管理系统</span>
<span class="h_b_right">当前版本：1.0</span>
<div class="clearboth"></div>
</div>
</div>
<div class="mainer">
<div class="sideleft">
<iframe frameborder="0" src="http://www.baidu.com/"></iframe>
</div>
<div class="sidecenter"><</div>
<div class="sideright">
<iframe frameborder="0" src="http://www.baidu.com/"></iframe>
</div>
<div class="clearboth"></div>
</div>
<div class="footer">
<span>版权所有：Abner</span>
</div>
</div>
</body>
</html>
下面是CSS代码：
Code
[http://www.xueit.com]
*{
padding:0;
margin:0;
list-style:none;
font-family:"宋体";
font-size:12px;
font-weight:normal;
line-height:20px;
}
html {
height:100%;
}
body{
background-color:#ffffff;
height:100%;
width:expression((documentElement.clientWidth < 1000) ? "1000px" : "auto" );
}
.clearboth{
clear:both;
}
iframe{
width:100%;
height:100%;
}
.container{
width:100%;
height:100%;
}
.header{
height:130px;
position:absolute;
left:0px;
top:0px;
right:0px;
min-width:980px;
}
.header_top{
height:106px;
background:#468ab4;
min-width:980px;
}
.logo{
padding:8px 50px 0 8px;
float:left;
display:inline;
}
.menu{
float:left;
display:inline;
width:570px;
}
.menu_image {
float:left;
width:570px;
margin:10px 0px 0px 1px;
padding:0px;
}
.tu {
float:left;
margin:0px 20px 0 0;
}
.menu_text {
float:left;
width:570px;
}
.zi {
float:left;
font-size:13px;
font-weight:bold;
width:60px;
text-align:center;
margin:0px 20px 0 0;
}
.person{
float:left;
width:150px;
display:inline;
padding-top:35px;
}
.state{
padding:70px 0 0 0px;
float:left;
width:50px;
display:inline;
}
.state p{
font-size:13px;
font-weight:bold;
}
.disappear{
visibility:hidden;
display:none;
}
.header_bottom {
background-color: #468ab4;
height:24px;
line-height:24px;
vertical-align:middle;
color:#FFF;
min-width:980px;
}
.h_b_left{
float:left;
padding-left:12px;
}
.h_b_right{
float:right;
padding-right:120px;
}
.sideleft{
position:absolute;
width:190px;
top:130px;
left:0px;
bottom:28px;
border-left:10px solid #468ab4;
*overflow:auto;
}
.sidecenter{
background-color: #468ab4;
width:10px;
position:absolute;
top:130px;
left:200px;
bottom:28px;
}
.sideright{
position:absolute;
top:130px;
left:210px;
right:0px;
bottom:28px;
border-right:10px solid #468ab4;
min-width:760px;
}
.footer{
position:absolute;
height:28px;
background:#468ab4;
left:0px;
bottom:0px;
right:0px;
text-align:center;
min-width:980px;
}
.footer span{
line-height:28px;
vertical-align:middle;
color:#FFF;
display:block;
width:100%;
}
/******IE6********/
html{
*padding:130px 10px 28px 10px;
}
.header{
*height:130px;
*margin-top:-130px;
*position:relative;
*top:0;
*right:0;
*bottom:0;
*left:0;
}
.container{
*min-width:1004px;
}
.sideleft{
*height:100%;
*float:left;
*width:200px;
*position:relative;
*top:0;
*right:0;
*bottom:0;
*left:0;
}
.sidecenter{
*height:100%;
*float:left;
*width:10px;
*position:relative;
*top:0;
*right:0;
*bottom:0;
*left:0;
}
.sideright{
*height:100%;
*margin-left:210px;
_margin-left:207px;
*position:relative;
*top:0;
*right:0;
*bottom:0;
*left:0;
}
.footer{
*height:28px;
*position:relative;
*top:0;
*right:0;
*bottom:0;
*left:0;
}
这基本就全了,看的时候要改一下css的link路径.
