主要思路是采用浮动布局，基本界面如图所示：
第一步（可以观察如何利用隐形DIV实现center的布局）：
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<style>
body {
background-color: greenyellow;
}
#left-top{
float: left;
width: 50px;
height: 200px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
}
#right-top{
float: left;
width: 200px;
height: 50px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
}
#center{
float: left;
width: 150px;
height: 150px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
}
#div1{
height: 100;
}
</style>
</head>
<body>
<div id=”left-top”></div>
<div id=”right-top”></div>
<div id=”div1″></div>
<div id=”center”></div>
</body>
</html>
第二步（进行必要的格式优化和参数调整）：
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<style>
body {
background-color: greenyellow;
}
#left-top{
float: left;
width: 50px;
height: 200px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
}
#right-top{
float: left;
width: 200px;
height: 50px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
border-left-width: 0px;
}
#center{
float: left;
width: 146px;
height: 146px;
background-color: red;
border-width: 0px;
}
#div1{
height: 58px;
}
</style>
</head>
<body>
<div id=”left-top”></div>
<div id=”right-top”></div>
<div id=”div1″></div>
<div id=”center”></div>
</body>
</html>
第三步（有问题，很难将最后一个放好）：
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<style>
body {
background-color: greenyellow;
}
#left-top{
float: left;
width: 50px;
height: 200px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
}
#right-top{
float: left;
width: 200px;
height: 50px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
border-left-width: 0px;
}
#center{
float: left;
width: 146px;
height: 146px;
background-color: red;
border-width: 0px;
}
#div1{
height: 58px;
}
#right-bottom
{
float: left;
width: 50px;
height: 200px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
border-top-width: 0px;
}
#left-bottom
{
float: left;
width: 200px;
height: 50px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
border-left-width: 0px;
}
#div2{
height: 210px;
}
</style>
</head>
<body>
<div id=”left-top”></div>
<div id=”right-top”></div>
<div id=”div1″></div>
<div id=”center”></div>
<div id=”right-bottom”></div>
<div id=”div2″></div>
<div id=”left-bottom”></div>
</body>
</html>
第四步（强行利用外边距实现最后的定位补齐）：
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<style>
body {
background-color: greenyellow;
}
#left-top{
float: left;
width: 50px;
height: 200px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
border-bottom-width: 0px;
}
#right-top{
float: left;
width: 200px;
height: 50px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
border-left-width: 0px;
}
#center{
float: left;
width: 146px;
height: 146px;
background-color: gray;
border-width: 0px;
}
#div1{
height: 58px;
}
#left-bottom
{
float: left;
width: 200px;
height: 50px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
border-right-width: 0px;
}
#div2{
height: 146px;
}
#right-bottom{
margin-top: -150px;
float: left;
width: 50px;
height: 200px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
}
</style>
</head>
<body>
<div id=”left-top”></div>
<div id=”right-top”></div>
<div id=”div1″></div>
<div id=”center”></div>
<div id=”div2″></div>
<div id=”left-bottom”></div>
<div id=”right-bottom”></div>
</body>
</html>