html/css 布局练习3
生活随笔
收集整理的這篇文章主要介紹了
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效果圖：
轉載于:https://www.cnblogs.com/baoweiluobo/p/5819313.html
總結
以上是生活随笔為你收集整理的html/css 布局练习3的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【网络收集】order by 自定义排序
- 下一篇： Github上LeakCanary编译报