网页精准布局，学会受用一生

我不是费圆

发布于 2020-12-17 11:24:41

4490

发布于 2020-12-17 11:24:41

文章被收录于专栏：鲸鱼动画

无论哪种网页布局，首先统筹全局，从最外侧开始看，如图：我们先分左右后分上下，比如最外侧是：侧边栏、内容；内容区域有：导航栏、头部、内容；内容中再分侧边栏与内容。结合代码一目了然：

<!-- 最大父元素 -->
<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>

样式代码：

.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;}
}

效果图：