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

发布时间：2024年01月12日

文章目录

👩?💻 基础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; /* 鼠标悬停时改变颜色 */
}

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

🚀 预览与保存

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

🚀 下一步计划

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

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

文章来源:https://blog.csdn.net/weixin_46412417/article/details/135550537
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章