效果图：
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>
原文：http://www.cnblogs.com/baoweiluobo/p/5819313.html
