html/css 钢琴黑白格布局

时间：2022-08-30 21:00:40

效果图：

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>

相关文章