模块4：个人档案袋

1.项目概述和 Git 设置

现在，是时候利用前三天的知识来建立一些东西了。

首先，去GitHub上开一个新的Repo。随意命名，最好命名为 "developer-portfolio"，同时在你的系统中创建一个与你的git仓库同名的文件夹。在VS Code中打开该文件夹。在该文件夹中创建一个HTML文件 "index.html"。现在，输入"！"，然后点击Tab/Enter，得到一个HTML网页的骨架。根据你的需要改变标题，并创建一个名为 "style.css "的CSS文件，并将其与 "index.html "连接起来。

现在去你的终端，写下你在repo中发现的所有命令，以便连接你的git repo。确保推送成功，或者在有任何问题的情况下，在前几天的指示帮助下尝试解决故障。

2.移除简单的图片背景，设置一个漂亮的背景

你需要一张漂亮的照片来装点你的作品集。如果你有Photoshop技能，那就太好了，但由于你正在学习网站开发，让我们假设你没有。所以，在一些网站的帮助下，你可以轻松地设置一个花哨的背景。要做到这一点，使用任何背景去除器，通过搜索谷歌。去除你的照片背景后，使用下面这个网站添加一个很酷的花式背景。

Photopea | 在线照片编辑器

它看起来几乎就像adobe photoshop。

所以，工作完成后，导出你的照片并下载到你的项目文件夹。

3.设置谷歌字体和安装自动刷新的实时服务器

现在进入你的 "index.html"，开始工作。要使用谷歌美丽的 "Poppins字体"[我们将使用 "Regular 400 "版本]，请在谷歌搜索这个名字，然后复制链接（如下所示）并将其粘贴到CSS文件链接行之前的头部部分。

在 "style.css "文件中，将这一规则写入正文部分，因为这一字体将在整个正文部分使用。

由于编写代码、保存代码，然后通过在网页浏览器中重新加载页面来查看变化的任务相当枯燥，可以通过在VS代码中安装一个实时服务器来解决（在扩展中搜索 "实时服务器"，然后安装它）。不，回到你的 "index.html "文件，点击 "Alt+L"，然后点击 "Alt+O"，一个新的页面就会在你的浏览器中打开，并带有实时服务器。

现在，无论你在代码中做了什么改动，都会在浏览器中自动看到，而不需要重新加载[如果过了一会儿还不行，可以尝试再次打开实时服务器，并关闭之前的标签] 。

4.通过使用来改变标题的部分风格

使用标签改变你的名字的颜色。同时，在标签内添加一个类，然后在 "style.css "文件内对该类进行着色，并保存它。现在，看看这些变化。另外，在

标签内的你的名字下添加一些关于你的东西。

使用标签

这将导致这样的结果。

部分风格化的结果

5.放置容器、并排、图像大小、链接按钮样式

现在添加 "Hire Me "超文本，并将其链接到你的LinkedIn账户，还有你早先准备好的肖像图片，放在段落下面，用两个

容器分别包围两部分，并进一步将所有东西都包围在标签中。稍后，在 "style.css "文件中以你想要的方式对其进行样式化。

HTML代码

CSS代码

6.梦幻区，背景图片，背景重复

在一个名为 "top-banner "的类中包含你的部分，然后在 "style.css "文件中用一个横幅图片来样式这个top-banner。通过使用 "background-image: url (your image location) "来设置。之后设置 "background-repeat: no-repeat"，否则你会看到你的横幅重复了很多次。此外，将 "body "的边距设置为零，就可以看到变化了。

CSS代码

完成以上工作后，你的网页将看起来像........

网页的第一个部分

现在，通过复制之前的部分来制作一个新的部分。你所要做的就是镜像前面的部分。只需将图片放在左边，在右边的

内写些东西。

网页的第二部分

7.体验区，重构灵活的容器，有意义的类名

每次你改变或添加你的代码时，不要忘记将代码推送到GitHub。现在，你必须再创建一个部分，这个部分与之前的部分不同，而且有点困难。所以，让我们开始行动吧。

创建一个部分，在该部分中创建两个

。一个用于放置 "经验 "标题，另一个用于放置另外两个

，在这些

中使用

和

标签添加标题和段落。使用flexible-container{display : flex; }来强制它们内联。之后，使用一些填充物使

看起来更漂亮。你可以从下面得到帮助。

HTML代码

8.箱体阴影，背景图片

给你的字幕加上一些颜色，并添加一个背景图片。

现在，关键的部分来了，那就是添加盒状阴影。你最好在谷歌上搜索 "CSS中的盒状阴影"，并在这些

中添加盒状阴影。就像{box-shadow:10 px 10px 40px gray}一样，它表示你的阴影在X轴和Y轴上的偏移区域，也表示模糊半径和阴影的颜色。你就快完成了。

CSS代码

9.边框图片和页脚

你必须在这些

边框的左侧添加一些渐变效果。所以，你所要做的就是通过使用{background image: linear-gradient(orange, salmon) }来添加一些边框渐变效果，同时，为了让你了解边框图像是由不同的片断（1-9）组成的。所以，这就是为什么你必须添加片断号，否则你的渐变将不可见。

这两个