第十一章：项目实战：创建个人作品集网站

1. 项目介绍与规划

1.1 项目需求分析与功能规划

在本章节中，我们将通过创建一个个人作品集网站来实践我们所学的 CSS 技巧。一个典型的个人作品集网站应包含以下功能：

主页：展示个人简介、照片和主要作品。
关于我：详细介绍你的背景、技能和经历。
作品集：展示你的项目和作品，每个作品包含图片、描述和链接。
联系：提供联系方式，比如电子邮件、社交媒体链接和联系表单。

1.2 项目目录结构的设计

为了保持项目结构的清晰，我们建议采用如下目录结构：

my-portfolio/
│
├── index.html
├── about.html
├── portfolio.html
├── contact.html
│
├── css/
│   ├── styles.css
│   └── reset.css
│
├── images/
│   ├── profile.jpg
│   └── project1.jpg
│
└── js/
    └── scripts.js

2. 页面结构与布局

2.1 使用 HTML 构建页面结构

首先，我们需要编写 HTML 代码来创建网站的基本结构。以下是主要页面的 HTML 框架：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的作品集</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="index.html">主页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="portfolio.html">作品集</a></li>
          <li><a href="contact.html">联系</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <!-- 页面主要内容 -->
    </main>

    <footer>
      <p>&copy; 2024 我的作品集</p>
    </footer>
  </body>
</html>

2.2 使用 CSS 进行布局与样式美化

接下来，我们为网站添加基本的样式和布局。以下是 styles.css 文件的示例：

/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* styles.css */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

header {
  background: #333;
  color: #fff;
  padding: 1rem 0;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 1rem;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

main {
  padding: 2rem;
}

footer {
  text-align: center;
  padding: 1rem 0;
  background: #333;
  color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
}

3. 互动与特效

3.1 实现导航栏的交互效果

为了让导航栏在不同页面之间切换时有更好的用户体验，我们可以添加一些简单的 CSS 过渡效果。

nav ul li a:hover {
  color: #ff6347;
  transition: color 0.3s ease-in-out;
}

3.2 添加动画与过渡效果

在页面元素上添加过渡效果和动画可以提高网站的互动性。例如，我们可以为主页上的图片添加缩放效果：

.main-image {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: block;
  transition: transform 0.3s ease-in-out;
}

.main-image:hover {
  transform: scale(1.05);
}

3.3 创建响应式设计

为了确保网站在不同设备上都能有良好的展示效果，我们需要添加媒体查询，实现响应式设计。以下是一个简单的示例：

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }

  .main-image {
    width: 100%;
  }
}

4. 项目总结与发布

4.1 项目优化与测试

在项目完成后，我们需要对网站进行优化和测试，确保其在各种设备和浏览器中都能正常运行。

优化代码：删除不必要的代码，合并和最小化 CSS 和 JavaScript 文件。
测试兼容性：在不同的浏览器和设备上测试网站，确保其兼容性。

4.2 部署网站到 GitHub Pages 或 Netlify

最后，我们可以将网站部署到 GitHub Pages 或 Netlify，使其上线并供他人访问。

部署到 GitHub Pages

将项目推送到 GitHub 仓库。
进入仓库的设置页面，找到 "GitHub Pages" 部分。
选择主分支作为发布来源，保存设置。
等待几分钟后，你的网站就会在 https://<username>.github.io/<repository> 上上线。

部署到 Netlify

登录 Netlify 并连接你的 GitHub 账户。
创建一个新站点并选择你要部署的仓库。
配置构建设置并点击“Deploy Site”。
等待 Netlify 部署完成，你的网站就会在提供的 URL 上上线。

通过本章节的学习和实践，你已经掌握了从头构建一个个人作品集网站的基本步骤和技巧。继续保持学习热情，不断优化和丰富你的作品集吧！