html/css 钢琴黑白格布局 - 保卫萝卜

效果图：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 body{margin:0;}
 8 .one{width:100px; height:100px;  float:left;}
 9 .body{ margin:100px 100px 100px 100px;width:300px;height:100px; border:1px solid #000; border-left:0; }
10 .first{width:50px; height:100px; border:1px solid #000; float:left; border-bottom:0;}
11 .firstblack{width:50px; height:60px; border:1px solid #000; background-color:#000;}
12 .secondblack{widtn:50px; height:30px;  border:1px solid #000; background-color:#000; margin-top:-62px;}
13 .two{width:100px; height:100px; overflow:hidden; float:left;}
14 .three{width:100px; height:100px; overflow:hidden; float:left;}
15 
16 </style>
17 </head>
18 
19 <body>
20 <div class="body">
21 <div class="one">
22     <div class="first"></div>
23     <div class="firstblack"></div>
24     
25     <div class="secondblack"></div>
26 </div>
27 
28 <div class="two">
29     <div class="first"></div>
30     <div class="firstblack"></div>
31     
32     <div class="secondblack"></div>
33 </div>
34 <div class="three">
35     <div class="first"></div>
36     <div class="firstblack"></div>
37     
38     <div class="secondblack"></div>
39 </div>
40 </div>
41 
42 </body>
43 </html>

View Code

posted on 2016-08-29 12:55 保卫萝卜阅读(512) 评论(0) 收藏举报

刷新页面返回顶部