简单前端项目：20张图片跳转页面 - HTML和CSS示例 - 常规

创建一个简单的图片跳转前端项目

这是一个简单的前端项目，包含 20 张图片，每张图片都可以跳转到一个页面。

HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<title>跳转页面</title>
	<style>
		img {
		width: 150px;
		height: 150px;
		margin: 10px;
		cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>请选择要跳转的页面：</h1>
	<div>
		<a href='page1.html'><img src='img/img1.jpg'></a>
		<a href='page2.html'><img src='img/img2.jpg'></a>
		<a href='page3.html'><img src='img/img3.jpg'></a>
		<a href='page4.html'><img src='img/img4.jpg'></a>
		<a href='page5.html'><img src='img/img5.jpg'></a>
	</div>
	<div>
		<a href='page6.html'><img src='img/img6.jpg'></a>
		<a href='page7.html'><img src='img/img7.jpg'></a>
		<a href='page8.html'><img src='img/img8.jpg'></a>
		<a href='page9.html'><img src='img/img9.jpg'></a>
		<a href='page10.html'><img src='img/img10.jpg'></a>
	</div>
	<div>
		<a href='page11.html'><img src='img/img11.jpg'></a>
		<a href='page12.html'><img src='img/img12.jpg'></a>
		<a href='page13.html'><img src='img/img13.jpg'></a>
		<a href='page14.html'><img src='img/img14.jpg'></a>
		<a href='page15.html'><img src='img/img15.jpg'></a>
	</div>
	<div>
		<a href='page16.html'><img src='img/img16.jpg'></a>
		<a href='page17.html'><img src='img/img17.jpg'></a>
		<a href='page18.html'><img src='img/img18.jpg'></a>
		<a href='page19.html'><img src='img/img19.jpg'></a>
		<a href='page20.html'><img src='img/img20.jpg'></a>
	</div>
</body>
</html>

CSS 代码：

img {
	width: 150px;
	height: 150px;
	margin: 10px;
	cursor: pointer;
}

项目结构

在根目录下创建 20 个 HTML 文件，分别命名为 page1.html 到 page20.html，每个文件的内容可以自由设计。
在根目录下创建一个名为 “img” 的文件夹，将 20 张图片分别命名为 img1.jpg 到 img20.jpg，并放入该文件夹中。

运行项目

启动浏览器，打开 index.html 文件，即可看到 20 张图片，点击任意一张图片即可跳转到对应的页面。

注意: 请确保将图片路径修改为正确的路径，并根据需要更改图片尺寸、间距等 CSS 样式。