版本1：利用Table：
<html>
<head
lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.style1 {
width: 30px;
background-color: red;
}
.style2 {
height: 30px;
background-color: red;
}
.style3 {
background-color: #555555;
}
</style>
</head>
<body>
<table
height="200" width="200" border="0">
<tr>
<td class="style1" rowspan="2"> </td>
<td class="style2" colspan="2"> </td>
</tr>
<tr>
<td class="style3"> </td>
<td class="style1" rowspan="2"> </td>
</tr>
<tr>
<td class="style2" colspan="2"> </td>
</tr>
</table>
</body>
</html>
版本2：利用DIV
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: greenyellow;
}
#center {
width: 200px;
height: 200px;
background-color: gray;
border: none;
float: left;
}
#left-top, #right-top, #left-bottom, #right-bottom, #div1, #div2, #div3, #div4 {
width: 50px;
height: 50px;
background-color: red;
border: solid;
border-color: white;
float: left;
}
#div1, #div2 {
width: 200px;
border-left: none;
}
#div1 {
border-right: none;
}
#div2 {
margin-top: -6px;
}
#div3, #div4 {
height: 200px;
border-top: none;
}
#div3 {
clear: left;
margin-top: -3px;
}
#div4 {
margin-left: -3px;
}
#left-top {
border-bottom: none;
}
#right-top {
border-left: none;
}
#left-bottom {
margin-top: -6px;
clear: left;
border-right: none;
}
#right-bottom {
margin-top: -3px;
border-top: none;
border-left: none;
}
</style>
</head>
<body>
<div id="left-top"></div>
<div id="div1"></div>
<div id="right-top"></div>
<div id="div3"></div>
<div id="center"></div>
<div id="div4"></div>
<div id="left-bottom"></div>
<div id="div2"></div>
<div id="right-bottom"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: greenyellow;
}
#left-top, #right-top,#right-bottom,#left-bottom{
width: 50px;
height: 50px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
}
#center {
float: left;
width: 146px;
height: 146px;
border: none;
background-color: dimgray;
}
#left-top {
float: left;
height: 200px;
}
#right-top {
float: left;
width: 200px;
border-left: none;
}
#right-bottom{
float: left;
height: 200px;
border-top: none;
}
#left-bottom{
margin-top: -58px;
float: left;
width: 200px;
}
#div1 {
width: 200px;
height: 58px;
}
#div2 {
float: left;
width: 200px;
height: 204px;
}
</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>