DIV+CSS 网页布局之：混合布局

发布时间：2016-03-14 23:00:31

1、混合布局　　在了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。 1 <!DOC ...

1、混合布局

　　在了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta charset="UTF-8"> 5   <title>混合布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #header{ 9   height:50px;10   background:blue;11 }12 #main{13   width:100%;14   overflow:hidden;15 }16 #main .main-left{17   width:20%;18   height:800px;19   background:lightgreen;20   float:left;21 }22 #main .main-right{23   width:80%;24   height:800px;25   float:right;26 }27 #main .main-right .right-l{28   width:80%;29   height:800px;30   background:yellow;31   float:left;32 }33 #main .main-right .right-r{34   width:20%;35   height:800px;36   background:pink;37   float:right;38 }39 #footer{40   height:50px;41   background:gray;42 }43 </style>44 </head>45 <body>46 <div id="header">头部</div>47 <div id="main">48   <div class="main-left">左边</div>49   <div class="main-right">50     <div class="right-l">右-左</div>51     <div class="right-r">右-右</div>52   </div>53 </div>54 <div id="footer">页脚</div>55 </body>56 </html>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com