简单美观 HTML 模板：左侧导航，点击查看内容页面

这是一个简单美观的 HTML 模板，左侧是导航栏，右侧是内容区域。点击导航栏中的链接，右侧会显示相应的内容页面。适用于网页设计初学者和需要快速搭建网站结构的开发者。

模板代码

<!DOCTYPE html>
<html>
<head>
	<title>简单美观的 HTML 模板</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}
		nav {
			background-color: #333;
			color: #fff;
			width: 200px;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			padding: 10px;
			box-sizing: border-box;
		}
		nav ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		nav li {
			margin: 10px 0;
		}
		nav a {
			color: #fff;
			text-decoration: none;
			display: block;
			padding: 5px;
			border-radius: 5px;
			transition: background-color 0.2s ease;
		}
		nav a:hover {
			background-color: #666;
		}
		.content {
			margin-left: 200px;
			padding: 10px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<nav>
		<ul>
			<li><a href='page1.html'>页面1</a></li>
			<li><a href='page2.html'>页面2</a></li>
			<li><a href='page3.html'>页面3</a></li>
		</ul>
	</nav>
	<div class='content'>
		<!-- 初始页面 -->
		<h1>欢迎来到我的网站</h1>
		<p>请点击左侧导航栏的链接查看其他页面</p>
	</div>
</body>
</html>

使用方法

将上面的代码保存为一个 HTML 文件，例如 index.html。
在同级目录下创建名为 page1.html、page2.html、page3.html 的文件，分别编写不同的页面内容。
打开 index.html 文件，点击导航栏的链接，就可以在右侧看到相应的页面了。

注意事项

为了实现页面跳转，请确保 page1.html、page2.html、page3.html 文件与 index.html 文件在同一目录下。
可以根据需要修改导航栏和内容区域的样式。
可以添加更多导航项和页面内容。

希望这个简单美观的 HTML 模板能够帮助您快速搭建网站结构！