介绍
投资组合画廊是一个展示您投资组合中项目的网页。它可以用来向潜在雇主或客户展示您的技能和工作成果，从而增加您在行业中的信誉度。在这篇文章中，我们将学习如何使用HTML和CSS创建一个投资组合画廊。我们将创建一个简单但漂亮的投资组合画廊，其中包含三个项目。我们将为您提供必要的代码和说明。
准备工作
在开发投资组合画廊之前，您需要为每个项目收集和整理一些必要的信息，例如项目描述、图片和链接等。这些信息将用于展示您的项目。
在开始编写代码之前，您需要选择一种代码编辑器，并确保您已经安装了最新版本的HTML和CSS。
HTML 代码
创建 HTML 模板
首先，让我们创建一个HTML模板。HTML模板是一个基本的HTML结构，您可以在其中添加您的内容。在下面的代码中，我们将创建基本的HTML模板，其中包含标题、脚本和样式表。
<!DOCTYPE html>
<html>
<head>
<title>投资组合画廊</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>我的投资组合</h1>
</header>
<main>
<!-- 在这里添加项目 -->
</main>
<footer>
<p>版权所有 ?2021。</p>
</footer>
</body>
</html>
添加项目
现在，我们将在main标签中添加三个项目。每个项目都由一个包含项目图片和项目名称的div元素组成。代码如下：
<div class="project">
<img src="project1.jpg" alt="Project 1">
<h3>项目 1</h3>
</div>
<div class="project">
<img src="project2.jpg" alt="Project 2">
<h3>项目 2</h3>
</div>
<div class="project">
<img src="project3.jpg" alt="Project 3">
<h3>项目 3</h3>
</div>
CSS 代码
布局和样式
现在，我们需要添加CSS样式来设计投资组合画廊。第一步是设置HTML元素的基本样式。在下面的代码中，我们设置了全局字体和背景颜色。
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
现在，我们将为在上面步骤中创建的div元素添加样式。我们将为每个项目创建一个子类project，并设置以下属性：
宽度：设置项目的宽度，使其在不同大小的屏幕上呈现良好。
高度：设置项目的高度，使其具有统一的外观。
边距：设置项目之间的空间。
边框：为项目添加边框。
文本对齐：设置项目名称在框中的位置。
.project {
width: 30%;
height: 300px;
margin: 20px;
border: 1px solid #ccc;
text-align: center;
}
.project img {
max-width: 100%;
max-height: 100%;
}
.project h3 {
margin-top: 10px;
margin-bottom: 0;
}
现在，我们已经创建了一个简单但漂亮的投资组合画廊。
结束语
在本文中，我们学习了如何使用HTML和CSS创建投资组合画廊。我们创建了一个简单但漂亮的投资组合画廊，其中包含三个项目。通过学习本文，您可以为自己的投资组合创建一个定制的网页。