大学生自我介绍网页模板 - 青色背景，线条装饰，轮毂划分区域 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>大学生自我介绍网页模板 - 青色背景，线条装饰，轮毂划分区域</title>
	<style>
		body {
			background-color: #87CEEB;
			font-family: Arial, sans-serif;
		}
		.container {
			margin: 0 auto;
			max-width: 800px;
			padding: 20px;
			border: 5px solid #fff;
			box-shadow: 0 0 20px #000;
			background-color: #fff;
			position: relative;
		}
		.header {
			text-align: center;
			margin-bottom: 50px;
		}
		h1 {
			font-size: 40px;
			color: #333;
			margin: 0;
			padding: 0;
		}
		h2 {
			font-size: 30px;
			color: #333;
			margin: 0 0 20px;
			padding: 0;
		}
		.line {
			height: 5px;
			background-color: #87CEEB;
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			margin-top: -2.5px;
		}
		.circle {
			width: 50px;
			height: 50px;
			border: 5px solid #fff;
			background-color: #87CEEB;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -30px;
			margin-left: -30px;
			z-index: 1;
		}
		.content {
			padding: 50px 0;
			text-align: center;
		}
		p {
			font-size: 20px;
			line-height: 1.5;
			color: #333;
			margin: 0 0 20px;
			padding: 0;
		}
		img {
			width: 250px;
			height: 250px;
			border-radius: 50%;
			margin-bottom: 20px;
			cursor: pointer;
		}
		.footer {
			text-align: center;
			margin-top: 50px;
		}
		.footer a {
			font-size: 20px;
			color: #333;
			text-decoration: none;
			margin: 0 10px;
			transition: all 0.3s ease;
		}
		.footer a:hover {
			color: #87CEEB;
		}
	</style>
</head>
<body>
	<div class='container'>
		<div class='header'>
			<h1>大学生自我介绍</h1>
			<h2>My Self-Introduction</h2>
		</div>
		<div class='line'></div>
		<div class='circle'></div>
		<div class='content'>
			<img src='https://picsum.photos/id/237/250/250' alt='个人照片'>
			<p>大家好，我是xxx，来自xx专业，是一名大学生。我喜欢读书、打篮球、听音乐等多种兴趣爱好，同时我也非常热爱学习。在大学期间，我参加了各种社团活动，积极参与学校组织的各项活动，积累了很多珍贵的经验。</p>
			<p>我希望在未来的日子里，能够继续努力学习，取得更好的成绩，并且为社会做出一些贡献。同时，我也希望能够结交更多的朋友，拓展自己的人脉圈。</p>
		</div>
		<div class='footer'>
			<a href='#'>联系方式</a>
			<a href='#'>个人作品</a>
			<a href='#'>社交账号</a>
		</div>
	</div>
	<script>
		var img = document.querySelector('img');
		img.onclick = function() {
			window.location.href = 'https://www.baidu.com';
		}
	</script>
</body>
</html>