標籤：type 技術 log 分享 慕課 blog alt nbsp 浮動
<html><head><title>混合布局學習</title><style type="text/css">body{margin:0;padding:0;text-align:center}.top{height:50px;background:#00f;margin:0 auto}.head{height:50px;width:700px;background:#f96;margin:0 auto}.main{width:700px;height:600px;background:#ccc;margin:0 auto}.foot{width:700px;height:50px;background:#0f0;margin:0 auto}/*中間部分布局*//*float:left向左浮動*/.left{width:500px;height:600px;background:#f00;float:left}.sub_ll{width:100px;height:600px;background:#f33;float:left}.sub_lr{width:400px;height:600px;background:#f66;float:right}.right{width:200px;height:600px;background:#ff0;float:right}</style></head><body>混合配置樣式<br/><div class="top"><div class="head">標題</div></div><div class="main"><div class="left"><div class="sub_ll">左側的子1</div><div class="sub_lr">左側的子2</div></div><div class="right">我是右側的內容哦</div></div><div class="foot">04</div> <br/> <br/></body></html>
效果如下：
關鍵知識點：
通過div的嵌套，利用float對div的布局進行控制，注意子div的寬度之和應該與父div的寬度大小一樣
慕課筆記利用css進行布局【混合布局】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
