div+css布局

<!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>

div+css布局_第1张图片

你可能感兴趣的:(div+css)