html/css 布局练习3 - 保卫萝卜

效果图：

 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{width:300px;height:300px; margin:100px; border:10px solid #CCC;}
 8 .left{width:150px; height:300px; background-color:#3C9; float:left;}
 9 .top{width:150px; height:100px; background-color:#FC6; float:left;}
10 .center{width:150px; height:100px;}
11 .centerleft{width:75px; height:100px; background-color:#F09; float:left;}
12 .centerright{width:75px; height:100px; background-color:#9FF; float:left;}
13 .bottom{width:150px; height:100px; background-color:#69F; float:left;
14 </style>
15 </head>
16 
17 <body>
18 <div class="body">
19     <div class="left"></div>
20     <div class="top"></div>
21     <div class="centerleft"></div>
22     <div class="centerright"></div>
23     <div class="bottom"></div>
24 
25     
26 </div>
27 </body>

View Code

自己过了几天利用after伪类+zoom的另一种写法：

 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 .clear{zoom:1;}
 8 .clear:after{content:""; display:block; clear:both;}
 9 .wrap{width:500px;margin:0 auto;border:10px solid #ccc;}
10 .left{width:200px;height:400px;background:#7a1;float:left;}
11 .right{width:300px; float:right;}
12 .right_top{height:80px; background-color:#F90;}
13 
14 .right_center_left{width:150px;height:160px;background:#f69; float:left;}
15 .right_center_right{width:150px;height:160px;background-color:#FCC; float:left;}
16 .bottom{height:160px;background:#369;}
17 </style>
18 </head>
19 
20 <body>
21 <div class="wrap clear">
22     <div class="left">
23     </div>
24     <div class="right">
25         <div class="right_top"></div>
26         <div class="right_center clear">
27             <div class="right_center_left"></div>
28             <div class="right_center_right"></div>
29         </div>
30         <div class="bottom"></div>
31     </div>
32 </div>
33 </body>
34 </html>

View Code

效果图：

posted on 2016-08-29 19:00 保卫萝卜阅读(257) 评论(0) 编辑收藏举报

刷新页面返回顶部