1. 项目介绍与规划

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

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

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

1.2 项目目录结构的设计

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

  1. my-portfolio/
  2. │
  3. ├── index.html
  4. ├── about.html
  5. ├── portfolio.html
  6. ├── contact.html
  7. │
  8. ├── css/
  9. │   ├── styles.css
  10. │   └── reset.css
  11. │
  12. ├── images/
  13. │   ├── profile.jpg
  14. │   └── project1.jpg
  15. │
  16. └── js/
  17.     └── scripts.js

2. 页面结构与布局

2.1 使用 HTML 构建页面结构

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>我的作品集</title>
  7.     <link rel="stylesheet" href="css/reset.css" />
  8.     <link rel="stylesheet" href="css/styles.css" />
  9.   </head>
  10.   <body>
  11.     <header>
  12.       <nav>
  13.         <ul>
  14.           <li><a href="index.html">主页</a></li>
  15.           <li><a href="about.html">关于我</a></li>
  16.           <li><a href="portfolio.html">作品集</a></li>
  17.           <li><a href="contact.html">联系</a></li>
  18.         </ul>
  19.       </nav>
  20.     </header>
  22.     <main>
  23.       <!-- 页面主要内容 -->
  24.     </main>
  26.     <footer>
  27.       <p>&copy; 2024 我的作品集</p>
  28.     </footer>
  29.   </body>
  30. </html>

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

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

  1. /* reset.css */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  8. /* styles.css */
  9. body {
  10.   font-family: Arial, sans-serif;
  11.   line-height: 1.6;
  12. }
  14. header {
  15.   background: #333;
  16.   color: #fff;
  17.   padding: 1rem 0;
  18. }
  20. nav ul {
  21.   list-style: none;
  22.   display: flex;
  23.   justify-content: center;
  24. }
  26. nav ul li {
  27.   margin: 0 1rem;
  28. }
  30. nav ul li a {
  31.   color: #fff;
  32.   text-decoration: none;
  33. }
  35. main {
  36.   padding: 2rem;
  37. }
  39. footer {
  40.   text-align: center;
  41.   padding: 1rem 0;
  42.   background: #333;
  43.   color: #fff;
  44.   position: fixed;
  45.   bottom: 0;
  46.   width: 100%;
  47. }

3. 互动与特效

3.1 实现导航栏的交互效果

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

  1. nav ul li a:hover {
  2.   color: #ff6347;
  3.   transition: color 0.3s ease-in-out;
  4. }

3.2 添加动画与过渡效果

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

  1. .main-image {
  2.   width: 100%;
  3.   max-width: 600px;
  4.   margin: 0 auto;
  5.   display: block;
  6.   transition: transform 0.3s ease-in-out;
  7. }
  9. .main-image:hover {
  10.   transform: scale(1.05);
  11. }

3.3 创建响应式设计

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

  1. @media (max-width: 768px) {
  2.   nav ul {
  3.     flex-direction: column;
  4.   }
  6.   .main-image {
  7.     width: 100%;
  8.   }
  9. }

4. 项目总结与发布

4.1 项目优化与测试

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

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

4.2 部署网站到 GitHub Pages 或 Netlify

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

部署到 GitHub Pages

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

部署到 Netlify

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

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