html/css 钢琴黑白格布局

效果图：

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>