个人网站制作 Part 2 | Web开发项目

news2025/1/10 12:52:12

文章目录

👩‍💻 基础Web开发练手项目系列：个人网站制作
- 🚀 添加导航栏
- - 步骤 1: 创建导航栏HTML
  - 步骤 2: 样式化导航栏
- 🚀 添加项目展示区域
- - 步骤 3: 创建项目展示HTML
  - 步骤 4: 样式化项目展示
- 🚀 添加联系信息
- - 步骤 5: 创建联系信息HTML
  - 步骤 6: 样式化联系信息
- 🚀 预览与保存
- 🚀 下一步计划

👩‍💻 基础Web开发练手项目系列：个人网站制作

欢迎回到基础Web开发练手项目系列！在上一篇博文中，我们创建了个人网站的基本结构和样式。本篇将继续丰富你的网站，添加导航栏、项目展示和联系信息。

在这里插入图片描述

🚀 添加导航栏

步骤 1: 创建导航栏HTML

在 index.html 文件的 <body> 部分添加以下导航栏结构：

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#projects">项目</a></li>
        <li><a href="#contact">联系我</a></li>
    </ul>
</nav>

步骤 2: 样式化导航栏

在 style.css 文件中添加以下样式，美化导航栏：

nav {
    background-color: #333;
    padding: 1rem;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

li {
    display: inline;
}

a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s ease; /* 添加过渡效果 */
}

a:hover {
    color: #ffcc00; /* 鼠标悬停时改变颜色 */
}

在这一步中，我们添加了鼠标悬停时的过渡效果，提高了用户体验。

🚀 添加项目展示区域

步骤 3: 创建项目展示HTML

在 index.html 文件的 <body> 部分添加以下项目展示区域：

<section id="projects">
    <h2>项目展示</h2>
    <div class="project">
        <img src="project1.jpg" alt="项目1">
        <h3>项目1</h3>
        <p>项目描述...</p>
    </div>
    <!-- 添加更多项目 -->
</section>

步骤 4: 样式化项目展示

在 style.css 文件中添加以下样式，为项目展示区域添加样式：

section {
    margin: 2rem 0;
}

h2 {
    color: #333;
}

.project {
    margin: 1rem 0;
}

img {
    max-width: 100%;
    height: auto;
}

h3 {
    color: #333;
}

在这一步中，我们添加了一个简单的项目展示区域，并美化了项目的样式。

🚀 添加联系信息

步骤 5: 创建联系信息HTML

在 index.html 文件的 <body> 部分添加以下联系信息区域：

<section id="contact">
    <h2>联系我</h2>
    <p>Email: <a href="mailto:your.email@example.com">your.email@example.com</a></p>
    <p>社交媒体: <a href="[链接到你的社交媒体账号]">Twitter</a></p>
</section>

步骤 6: 样式化联系信息

在 style.css 文件中添加以下样式，为联系信息区域添加样式：

p {
    margin: 0.5rem 0;
}

a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease; /* 添加过渡效果 */
}

a:hover {
    color: #0056b3; /* 鼠标悬停时改变颜色 */
}