<!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">
<!--
#header {
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;
}
#mainbox {
MARGIN: 0px ;
WIDTH: 580px;
BACKGROUND: #FFF;
}
#menu {
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 20%;
BACKGROUND: #ccd2de;
}
#sidebar {
FLOAT: left;
MARGIN: 2px 0px 2px 0px;
PADDING: 0px;
BACKGROUND: #00ff00;
WIDTH: 20%;
}
#content {
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px;
WIDTH: 60%;
BACKGROUND: #E0EFDE;
}
#footer {
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 0px 0px 0px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}
#left {
FLOAT: left;
BACKGROUND: #00ff00;
WIDTH: 100px;
height:40px;
}
#right {
BACKGROUND: #0000ff;
height:20px;
}
-->
</style>
</head>
<body>
<div id="header">Header</div>
<br>
<div id="header" style="margin:auto">style="margin:auto"使其居中</div>
<br>
<div id="mainbox">
<div id="sidebar">left占20%</div>
<div id="menu">right占20%</div>
<div id="content">content占60%<br>12<br>12312<br>12312<br>12312<br>123</div>
</div>
<div id="footer">
</div>
<br>
<div id="footer">
<div id="left">left左侧固定宽度</div>
<div id="right">right右侧第一行宽度自适应</div>
<div id="right">right右侧第二行宽度自适应</div>
</div>
<br>
<div id="left">left左侧固定宽度</div>
<div id="right" style="height:40px">right右侧宽度自适应</div>
<br>
<div id="left" style="line-height:18px">left左侧固定宽度(行间距18px)</div>
<div id="left" style="float:right;line-height:18px">right右侧固定宽度</div>
<div id="right" style="height:40px">content内容宽度自适应</div>
</body>
</html>
<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">
<!--
#header {
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;
}
#mainbox {
MARGIN: 0px ;
WIDTH: 580px;
BACKGROUND: #FFF;
}
#menu {
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 20%;
BACKGROUND: #ccd2de;
}
#sidebar {
FLOAT: left;
MARGIN: 2px 0px 2px 0px;
PADDING: 0px;
BACKGROUND: #00ff00;
WIDTH: 20%;
}
#content {
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px;
WIDTH: 60%;
BACKGROUND: #E0EFDE;
}
#footer {
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 0px 0px 0px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}
#left {
FLOAT: left;
BACKGROUND: #00ff00;
WIDTH: 100px;
height:40px;
}
#right {
BACKGROUND: #0000ff;
height:20px;
}
-->
</style>
</head>
<body>
<div id="header">Header</div>
<br>
<div id="header" style="margin:auto">style="margin:auto"使其居中</div>
<br>
<div id="mainbox">
<div id="sidebar">left占20%</div>
<div id="menu">right占20%</div>
<div id="content">content占60%<br>12<br>12312<br>12312<br>12312<br>123</div>
</div>
<div id="footer">
</div>
<br>
<div id="footer">
<div id="left">left左侧固定宽度</div>
<div id="right">right右侧第一行宽度自适应</div>
<div id="right">right右侧第二行宽度自适应</div>
</div>
<br>
<div id="left">left左侧固定宽度</div>
<div id="right" style="height:40px">right右侧宽度自适应</div>
<br>
<div id="left" style="line-height:18px">left左侧固定宽度(行间距18px)</div>
<div id="left" style="float:right;line-height:18px">right右侧固定宽度</div>
<div id="right" style="height:40px">content内容宽度自适应</div>
</body>
</html>
