最终效果预览

这个网页将包含以下几个主要部分：

学生个人网页制作html代码实例
（图片来源网络，侵删）
  1. 导航栏：固定在顶部，方便用户快速跳转到页面各个部分。
  2. 个人主页：包含大标题、个人照片、一句话介绍和“了解更多”的按钮。
  3. 关于我：更详细的自我介绍，包括教育背景和兴趣爱好。
  4. 技能：使用进度条展示各项技能的掌握程度。
  5. 项目经验：以卡片形式展示参与过的项目。
  6. 联系方式：提供社交媒体链接和联系表单。

如何使用

  1. 创建文件：在您的电脑上创建一个文件夹，my-portfolio，在该文件夹中创建以下三个文件：
    • index.html (网页结构)
    • style.css (自定义样式)
    • script.js (交互功能)
  2. 复制代码：将下面提供的代码分别复制到对应的文件中。
  3. ：打开 index.html 和 style.css，将其中所有以 [你的名字]、[你的照片URL] 等开头的占位符替换为您自己的信息。
  4. 添加图片：在 my-portfolio 文件夹中创建一个名为 images 的子文件夹，并将您的个人照片命名为 profile.jpg 放入其中，或者，您可以直接使用在线图片链接。
  5. 预览网页：用浏览器（如 Chrome, Firefox, Edge）打开 index.html 文件，即可查看您的个人网页。

HTML 代码 (index.html)

这是网页的骨架,定义了所有的内容和结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">[你的名字] - 个人主页</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">[你的名字]</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">关于我</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#skills">技能</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#projects">项目</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系我</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <main>
        <!-- 个人主页 Hero Section -->
        <section id="home" class="hero text-white text-center">
            <div class="container">
                <img src="images/profile.jpg" alt="[你的名字]的照片" class="rounded-circle img-fluid mb-4" width="200">
                <h1 class="display-4 fw-bold">你好，我是 <span class="text-warning">[你的名字]</span></h1>
                <p class="lead">一名充满热情的 [你的专业，如：计算机科学] 学生</p>
                <p class="lead">我专注于 [你的兴趣领域，如：Web开发、人工智能]</p>
                <a href="#about" class="btn btn-primary btn-lg">了解更多 <i class="bi bi-arrow-down-circle"></i></a>
            </div>
        </section>
        <!-- 关于我 -->
        <section id="about" class="py-5">
            <div class="container">
                <h2 class="text-center mb-5">关于我</h2>
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <p>你好！我是一名就读于 [你的大学名称] 的 [你的专业] 大学生，我对技术充满好奇，特别是 [你感兴趣的1-2个技术领域]，我相信通过代码可以创造改变世界的应用。</p>
                        <p>在学习之余，我喜欢 [你的爱好，如：打篮球、阅读、摄影]，这让我能够保持身心健康和创造力。</p>
                        <p>我的目标是成为一名优秀的 [你的职业目标，如：软件工程师]，并不断学习新知识，迎接新的挑战。</p>
                    </div>
                    <div class="col-md-6">
                        <h4>教育背景</h4>
                        <ul>
                            <li><strong>[你的大学名称]</strong> | [你的专业] | [入学年份] - [毕业年份]</li>
                            <li><strong>GPA:</strong> [你的GPA，如：3.8/4.0]</li>
                        </ul>
                        <h4>证书与荣誉</h4>
                        <ul>
                            <li>[证书名称，如：全国计算机等级考试二级证书]</li>
                            <li>[荣誉名称，如：校级三好学生]</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- 技能 -->
        <section id="skills" class="py-5 bg-light">
            <div class="container">
                <h2 class="text-center mb-5">我的技能</h2>
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <h5>HTML5</h5>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 90%;">90%</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <h5>CSS3 / Bootstrap</h5>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 85%;">85%</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <h5>JavaScript</h5>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 80%;">80%</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <h5>Python</h5>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 75%;">75%</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <h5>Java</h5>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 70%;">70%</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <h5>React (学习)</h5>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 60%;">60%</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 项目经验 -->
        <section id="projects" class="py-5">
            <div class="container">
                <h2 class="text-center mb-5">项目经验</h2>
                <div class="row">
                    <!-- 项目卡片 1 -->
                    <div class="col-md-4 mb-4">
                        <div class="card h-100">
                            <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="项目1截图">
                            <div class="card-body">
                                <h5 class="card-title">个人博客系统</h5>
                                <p class="card-text">使用 Python + Django 框架开发的个人博客，支持文章发布、评论和用户管理。</p>
                                <a href="#" class="btn btn-outline-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <!-- 项目卡片 2 -->
                    <div class="col-md-4 mb-4">
                        <div class="card h-100">
                            <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="项目2截图">
                            <div class="card-body">
                                <h5 class="card-title">在线待办事项应用</h5>
                                <p class="card-text">一个基于 Vue.js 的前端应用，实现了任务的增删改查、本地存储和优先级排序功能。</p>
                                <a href="#" class="btn btn-outline-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <!-- 项目卡片 3 -->
                    <div class="col-md-4 mb-4">
                        <div class="card h-100">
                            <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="项目3截图">
                            <div class="card-body">
                                <h5 class="card-title">数据可视化仪表盘</h5>
                                <p class="card-text">利用 Python 的 Pandas 和 Matplotlib 库，对公开数据集进行分析并生成交互式图表。</p>
                                <a href="#" class="btn btn-outline-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 联系方式 -->
        <section id="contact" class="py-5 bg-light">
            <div class="container">
                <h2 class="text-center mb-5">联系我</h2>
                <div class="row">
                    <div class="col-md-6">
                        <h4>让我们一起交流！</h4>
                        <p>如果您对我的项目感兴趣，或者有任何问题，欢迎随时联系我。</p>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="bi bi-envelope-fill text-primary"></i> [你的邮箱地址]</li>
                            <li class="mb-2"><i class="bi bi-telephone-fill text-primary"></i> [你的电话号码]</li>
                            <li class="mb-2"><i class="bi bi-geo-alt-fill text-primary"></i> [你的城市，如：北京市]</li>
                        </ul>
                        <div class="social-links mt-4">
                            <a href="[你的GitHub链接]" target="_blank" class="me-3"><i class="bi bi-github fs-4"></i></a>
                            <a href="[你的LinkedIn链接]" target="_blank" class="me-3"><i class="bi bi-linkedin fs-4"></i></a>
                            <a href="[你的微博链接]" target="_blank"><i class="bi bi-wechat fs-4"></i></a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <form id="contactForm">
                            <div class="mb-3">
                                <label for="name" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="email" required>
                            </div>
                            <div class="mb-3">
                                <label for="message" class="form-label">留言</label>
                                <textarea class="form-control" id="message" rows="4" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">发送消息</button>
                        </form>
                        <div id="formMessage" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer class="bg-dark text-white text-center py-3">
        <div class="container">
            <p>&copy; [当前年份] [你的名字]. All Rights Reserved.</p>
        </div>
    </footer>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script src="script.js"></script>
</body>
</html>

CSS 代码 (style.css)

这是自定义的样式表,用于美化页面，使其更具个性和视觉吸引力。

/* 全局样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    padding-top: 56px; /* 为固定导航栏留出空间 */
}
/* 导航栏样式 */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}
.nav-link {
    margin: 0 10px;
    transition: color 0.3s ease;
}
.nav-link:hover {
    color: #ffc107 !important; /* Bootstrap的warning颜色 */
}
/* Hero Section (主页) 样式 */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://source.unsplash.com/random/1600x900/?technology,code') no-repeat center center/cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
.hero h1 {
    margin-bottom: 20px;
}
/* 关于我、技能、项目等部分的通用样式 */
section {
    padding: 80px 0;
}
#about {
    background-color: #fff;
}
#skills {
    background-color: #f8f9fa;
}
#projects {
    background-color: #fff;
}
#contact {
    background-color: #f8f9fa;
}
h2 {
    font-weight: bold;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}
h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #ffc107;
}
/* 技能进度条样式 */
.progress {
    height: 25px;
    border-radius: 15px;
}
.progress-bar {
    background-color: #007bff; /* Bootstrap的primary颜色 */
    font-weight: bold;
    line-height: 25px;
}
/* 项目卡片样式 */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.card-img-top {
    height: 200px;
    object-fit: cover;
}
/* 联系方式样式 */
.social-links a {
    color: white;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}
.social-links a:hover {
    color: #ffc107;
}
/* 表单样式 */
#contactForm {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* 页脚样式 */
footer {
    margin-top: auto;
}

JavaScript 代码 (script.js)

这是交互功能的脚本,目前主要实现表单提交的简单反馈。

// 等待整个页面加载完成
document.addEventListener('DOMContentLoaded', function () {
    // 获取表单元素
    const contactForm = document.getElementById('contactForm');
    const formMessage = document.getElementById('formMessage');
    // 为表单添加提交事件监听器
    contactForm.addEventListener('submit', function (event) {
        // 阻止表单的默认提交行为（页面刷新）
        event.preventDefault();
        // 获取表单数据
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const message = document.getElementById('message').value;
        // 这里是前端验证，实际应用中还需要后端验证
        if (!name || !email || !message) {
            formMessage.innerHTML = '<div class="alert alert-warning">请填写所有字段。</div>';
            return;
        }
        // 模拟发送成功
        // 在真实应用中，这里会使用AJAX/Fetch将数据发送到服务器
        formMessage.innerHTML = '<div class="alert alert-success">消息发送成功！感谢您的留言，我会尽快回复您。</div>';
        // 清空表单
        contactForm.reset();
    });
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                // 计算目标位置，并减去导航栏高度，确保内容不会被导航栏遮挡
                const offsetTop = targetElement.offsetTop - 60;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });
});

扩展建议

这个实例是一个很好的起点,您可以根据自己的需求进行扩展：

学生个人网页制作html代码实例
（图片来源网络，侵删）
  1. 添加动画效果：使用 AOS (Animate On Scroll) 库或 CSS 动画，让页面在滚动时有更丰富的视觉效果。
  2. 集成后端：将联系表单与后端服务（如 Node.js, Python Flask, PHP）结合，实现真正的邮件发送功能。
  3. 博客功能：如果您想展示更多文章，可以考虑集成一个静态网站生成器（如 Hexo, Hugo）或使用 CMS（如 Strapi, Contentful）。
  4. 在线简历：将项目经验部分做得更详细，增加工作经历、实习经历等，使其成为一个完整的在线简历。
  5. 响应式优化：虽然 Bootstrap 已经处理了大部分响应式布局，但您可以在 style.css 中使用媒体查询 (@media) 进行更精细的调整。

希望这个详细的实例能帮助您成功制作出属于自己的个人网页！

学生个人网页制作html代码实例
（图片来源网络，侵删）