个人网站制作 Part 2 添加导航栏、项目展示、联系信息 | Web开发项目

---

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

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

添加导航栏

步骤 1: 创建导航栏HTML

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

<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 文件的 部分添加以下项目展示区域：

<section id="projects">
    <h2>项目展示h2>
    <div class="project">
        <img src="project1.jpg" alt="项目1">
        <h3>项目1h3>
        <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 文件的 部分添加以下联系信息区域：

<section id="contact">
    <h2>联系我h2>
    <p>Email: <a href="mailto:[email protected]">[email protected]a>p>
    <p>社交媒体: <a href="[链接到你的社交媒体账号]">Twittera>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; /* 鼠标悬停时改变颜色 */
}

在这一步中，我们添加了联系信息区域，并为邮箱和社交媒体链接添加了样式。

预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个拥有导航栏、项目展示和联系信息的基本个人网站了！

下一步计划

在下一篇文章中，我们将学习如何添加更多交互性，例如表单和动画效果。记得继续关注本系列，让你的网站更加炫彩和实用！

通过这个项目，你将逐步深入了解Web开发的不同方面。祝你编码愉快，继续努力！