手把手教你打造满屏品字布局，轻松实现独特风格！

9 min read

请问是指在网页上手写实现一个满屏的品字布局吗？以下是一种实现方式：

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>品字布局示例</title>
	<style>
		body{
			margin: 0;
			padding: 0;
			height: 100%;
		}
		.container{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
		.container>div{
			width: 33.33%;
			height: 33.33%;
			border: 1px solid black;
		}
		.container>div.center{
			position: absolute;
			top: 33.33%;
			left: 33.33%;
			width: 33.33%;
			height: 33.33%;
		}
	</style>
</head>
<body>
	<div class="container">
		<div></div>
		<div></div>
		<div></div>
		<div class="center"></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>

解释：

该示例中使用 flexbox 布局实现一个满屏的品字布局，其中：

  • body 标签设置 height: 100%，这样才能保证容器的高度占据整个页面高度。
  • .container 元素使用 flexbox 布局，设置 height: 100%，并将子元素进行 flex wrap 处理，以保证在任意屏幕宽度下都能保持品字布局的形状。
  • .container>div 选择器选择所有的子元素（即显示为黑色的 div），使用 width: 33.33% 和 height: 33.33% 设置每个 div 元素的尺寸，同时添加了一个黑色的边框，以方便区分。
  • .container>div.center 用于选择中间的 div 元素，添加一个半透明的白色背景，并设置 position: absolute、top: 33.33% 和 left: 33.33%，使其位于容器的中间位置，同时设置 width: 33.33% 和 height: 33.33% 以保证大小与相邻元素一致。

效果图如下所示：

品字布局示例