效果图:
aaarticlea/png;base64,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" alt="" />
<!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>
body{margin:0;}
.one{width:100px; height:100px; float:left;}
.body{ margin:100px 100px 100px 100px;width:300px;height:100px; border:1px solid #000; border-left:0; }
.first{width:50px; height:100px; border:1px solid #000; float:left; border-bottom:0;}
.firstblack{width:50px; height:60px; border:1px solid #000; background-color:#000;}
.secondblack{widtn:50px; height:30px; border:1px solid #000; background-color:#000; margin-top:-62px;}
.two{width:100px; height:100px; overflow:hidden; float:left;}
.three{width:100px; height:100px; overflow:hidden; float:left;} </style>
</head> <body>
<div class="body">
<div class="one">
<div class="first"></div>
<div class="firstblack"></div> <div class="secondblack"></div>
</div> <div class="two">
<div class="first"></div>
<div class="firstblack"></div> <div class="secondblack"></div>
</div>
<div class="three">
<div class="first"></div>
<div class="firstblack"></div> <div class="secondblack"></div>
</div>
</div> </body>
</html>