简单 HTML 个人主页模板 - 快速构建你的在线形象 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>我的个人主页</title>
	<meta charset='UTF-8'>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #f2f2f2;
		}
		header {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
		}
		h1 {
			margin: 0;
		}
		nav {
			background-color: #ccc;
			padding: 10px;
		}
		nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
		}
		nav li {
			margin: 0 10px;
		}
		nav a {
			color: #333;
			text-decoration: none;
			font-weight: bold;
			font-size: 18px;
			transition: color 0.3s ease;
		}
		nav a:hover {
			color: #666;
		}
		main {
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			max-width: 1200px;
			margin: 0 auto;
		}
		section {
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
			margin-bottom: 20px;
			width: 45%;
			padding: 20px;
			box-sizing: border-box;
		}
		section h2 {
			margin-top: 0;
		}
		section p {
			margin-bottom: 0;
		}
		footer {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
		}
	</style>
</head>
<body>
	<header>
		<h1>我的个人主页</h1>
	</header>
	<nav>
		<ul>
			<li><a href='#'>首页</a></li>
			<li><a href='#'>关于我</a></li>
			<li><a href='#'>联系我</a></li>
		</ul>
	</nav>
	<main>
		<section>
			<h2>个人资料</h2>
			<p>姓名：张三</p>
			<p>性别：男</p>
			<p>年龄：25</p>
			<p>职业：前端工程师</p>
		</section>
		<section>
			<h2>教育经历</h2>
			<p>2010-2014：本科，xxx大学，计算机科学与技术专业</p>
			<p>2014-2016：硕士，xxx大学，软件工程专业</p>
		</section>
		<section>
			<h2>工作经验</h2>
			<p>2016-2018：前端工程师，xxx公司</p>
			<p>2018-至今：前端工程师，xxx公司</p>
		</section>
	</main>
	<footer>
		<p>版权所有 &copy; 2021 张三</p>
	</footer>
</body>
</html>