以下是一个简单的利用 div + css 做的表格页面,从上到下分为四大块,第一大块分为左右两块,第三块分为左右两块,其余两块各自为一块:

<!DOCTYPE html>
<html>
<head>
	<title>表格页面</title>
	<style type="text/css">
		/* 整个页面的样式 */
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			font-size: 14px;
			line-height: 1.5;
		}

		/* 第一大块的样式 */
		.section1 {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			background-color: #f5f5f5;
			padding: 20px;
		}
		.section1 .left {
			flex-basis: 50%;
			padding-right: 20px;
		}
		.section1 .right {
			flex-basis: 50%;
			padding-left: 20px;
		}

		/* 第二大块的样式 */
		.section2 {
			background-color: #fff;
			padding: 20px;
		}

		/* 第三大块的样式 */
		.section3 {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			background-color: #f5f5f5;
			padding: 20px;
		}
		.section3 .left {
			flex-basis: 50%;
			padding-right: 20px;
		}
		.section3 .right {
			flex-basis: 50%;
			padding-left: 20px;
		}

		/* 第四大块的样式 */
		.section4 {
			background-color: #fff;
			padding: 20px;
		}
	</style>
</head>
<body>
	<!-- 第一大块 -->
	<div class="section1">
		<div class="left">
			<h2>左侧内容</h2>
			<p>这里是左侧内容的详细介绍。</p>
		</div>
		<div class="right">
			<h2>右侧内容</h2>
			<p>这里是右侧内容的详细介绍。</p>
		</div>
	</div>

	<!-- 第二大块 -->
	<div class="section2">
		<h2>第二大块内容</h2>
		<p>这里是第二大块内容的详细介绍。</p>
	</div>

	<!-- 第三大块 -->
	<div class="section3">
		<div class="left">
			<h2>左侧内容</h2>
			<p>这里是左侧内容的详细介绍。</p>
		</div>
		<div class="right">
			<h2>右侧内容</h2>
			<p>这里是右侧内容的详细介绍。</p>
		</div>
	</div>

	<!-- 第四大块 -->
	<div class="section4">
		<h2>第四大块内容</h2>
		<p>这里是第四大块内容的详细介绍。</p>
	</div>
</body>
</html>

以上代码中,使用了 flex 布局来实现页面的布局,同时利用不同的 class 来分别定义每个块的样式。其中,第一大块和第三大块都是左右两块,因此在样式中使用了 flex 布局的属性来实现左右两块的排列。同时,每个块都有自己的背景颜色和内边距,以便更好地区分不同的块

vscode如何一键注释在 Visual Studio Code 中一键注释可以使用快捷键 Ctrl + 或 Command + Mac来实现。 选择需要注释的代码行然后按下快捷键即可注释或取消注释所选代码块。如果注释多行代码也可以在第一行前面加上 在最后一行后面加上 来注释选中的代码块。利用div+css做一个表格页面从上到下分为四大块第一大块分为左右两块第三块分为左右两块其余两块各自为一块

原文地址: https://www.cveoy.top/t/topic/epxa 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录