无论哪种网页布局，首先统筹全局，从最外侧开始看，如图： 我们先分左右后分上下，比如最外侧是：侧边栏、内容； 内容区域有：导航栏、头部、内容； 内容中再分侧边栏与内容。 结合代码一目了然：
代码语言：javascript复制<!-- 最大父元素 -->
<div class="box flex">
<!-- 弹性盒子布局 -->
<div class="aside">最大侧边栏</div>
<div>
<div class="nav">顶部导航</div>
<div class="header">头部</div>
<!-- 弹性盒子布局 -->
<div class="flex">
<div class="aside_smoll">小侧边栏</div>
<div>
<div class="top">上方内容块</div>
<!-- 弹性盒子布局 -->
<div class="flex">
<!-- 左侧内容区域 -->
<div class="lef">
<div class="lef-nav">小导航条</div>
<div>小内容块</div>
</div>
<!-- 右侧内容区域 -->
<div class="rig">
<div class="rig-nav">小导航条</div>
<!-- 弹性盒子布局 -->
<div class="flex">
<div class="con-lef">左小内容块</div>
<div class="con-rig">右小内容块</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>样式代码：
代码语言：javascript复制.flex{display:flex;}
div{padding:6rpx}
.box{
.aside{background-color:#555555;}
.nav{background-color: #4CD964;}
.header{background-color: #007AFF;}
.aside_smoll{background-color: #999999;}
.top{background-color:#FF0000;}
.lef{background-color:#ff0;}
.lef-nav{background-color:#f0f0f0;}
.rig{background-color:#0ff;}
.rig-nav{background-color:#DD524D;}
.con-lef{background-color:skyblue;}
.con-rig{background-color:pink;}
}效果图：
对比下原图，是不是精准布局呢？精准布局考验的是大家对盒子模型的理解，以及对图形图案掌握程度，别急，点击下方标题，看看我是怎么绘制图形的：
