【css常用布局】面包屑导航布局（小白向）

说明

简单的面包屑导航布局

效果展示

实现原理

布局分析：

主要用斜杆来撑起整个高度

html部分：

<div class="container">
	<div class="crumb_container">
		<div class="crumb_text">首页</div>
		<div class="crumb_delimiter">/</div>
		<div class="crumb_text">手机商城</div>
		<div class="crumb_delimiter">/</div>
		<div class="crumb_text">苹果</div>
		<div class="crumb_delimiter">/</div>
		<div class="crumb_text">iPhone12</div>
	</div>
</div>

css部分：

.container {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.crumb_container {
	align-items: center;
	display: flex;
}

.crumb_text {
	height: 24px;
	font-size: 16px;
	line-height: 24px;
	padding: 0 8px;
}

.crumb_delimiter { // 标签
	color: rgba(0, 0, 0, 0.3);
	font-size: 36px;
	margin: 0px 4px;
}

完~