模板特点

  1. 响应式设计: 适配桌面、平板和手机等不同屏幕尺寸。
  2. 技术栈: HTML5, CSS3, jQuery (使用CDN引入，无需下载)。
  3. 模块化结构: 清晰的 header, section, footer 结构,易于理解和修改。
  4. 丰富的交互效果:
    • 平滑滚动: 点击导航栏链接平滑滚动到对应板块。
    • 导航栏高亮: 滚动时自动高亮当前所在的页面板块。
    • 返回顶部按钮: 滚动一定距离后显示,点击平滑返回顶部。
    • 主题切换: 提供亮色/暗色两种主题模式。
    • 动态加载: 模拟作品集的异步加载效果。
    • 滚动动画: 当板块进入视口时,内容淡入显示。
  5. 注释清晰: 代码中包含了详细的注释,方便您学习和修改。

如何使用

  1. 创建文件: 创建三个文件：index.html, style.css, script.js。
  2. 复制代码: 将下面提供的代码分别粘贴到对应的文件中。
  3. 预览: 用浏览器打开 index.html 文件即可看到效果。
  4. 自定义: 修改 style.css 中的颜色、字体等样式，修改 index.html 中的文本和图片链接，修改 script.js 中的交互逻辑。

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>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 Font Awesome 图标库 (可选，用于显示图标) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <a href="#home" class="logo">ZS</a>
            <ul class="nav-links">
                <li><a href="#home" class="nav-link active">首页</a></li>
                <li><a href="#about" class="nav-link">关于我</a></li>
                <li><a href="#skills" class="nav-link">技能</a></li>
                <li><a href="#portfolio" class="nav-link">作品集</a></li>
                <li><a href="#contact" class="nav-link">联系我</a></li>
            </ul>
            <!-- 主题切换按钮 -->
            <button id="theme-toggle" class="theme-toggle">
                <i class="fas fa-moon"></i>
            </button>
            <!-- 移动端菜单按钮 -->
            <div class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>
    <main>
        <!-- 首页部分 -->
        <section id="home" class="hero">
            <div class="container">
                <h1 class="hero-title">你好，我是 <span class="highlight">张三</span></h1>
                <p class="hero-subtitle">一名热爱编程与设计的大学生</p>
                <a href="#about" class="cta-button">了解更多</a>
            </div>
        </section>
        <!-- 关于我部分 -->
        <section id="about" class="about">
            <div class="container">
                <h2 class="section-title">关于我</h2>
                <div class="about-content">
                    <div class="about-text">
                        <p>我是一名来自XX大学计算机科学与技术专业的本科生，对前端开发和用户体验设计抱有极大的热情。</p>
                        <p>我善于学习新技术，喜欢用代码创造美好的事物，在课余时间，我喜欢参与开源项目，并不断挑战自己，提升解决问题的能力。</p>
                    </div>
                    <div class="about-image">
                        <img src="https://via.placeholder.com/300x300" alt="张三的照片">
                    </div>
                </div>
            </div>
        </section>
        <!-- 技能部分 -->
        <section id="skills" class="skills">
            <div class="container">
                <h2 class="section-title">我的技能</h2>
                <div class="skills-grid">
                    <div class="skill-card">
                        <i class="fab fa-html5"></i>
                        <h3>HTML5</h3>
                        <p>语义化标签，可访问性</p>
                    </div>
                    <div class="skill-card">
                        <i class="fab fa-css3-alt"></i>
                        <h3>CSS3</h3>
                        <p>Flexbox, Grid, 动画效果</p>
                    </div>
                    <div class="skill-card">
                        <i class="fab fa-js-square"></i>
                        <h3>JavaScript</h3>
                        <p>ES6+, jQuery, 异步编程</p>
                    </div>
                    <div class="skill-card">
                        <i class="fab fa-react"></i>
                        <h3>React</h3>
                        <p>组件化开发, Hooks</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 作品集部分 -->
        <section id="portfolio" class="portfolio">
            <div class="container">
                <h2 class="section-title">作品集</h2>
                <div class="portfolio-grid" id="portfolio-grid">
                    <!-- 作品将通过 jQuery 动态加载 -->
                    <div class="portfolio-item loading">
                        <div class="skeleton"></div>
                    </div>
                    <div class="portfolio-item loading">
                        <div class="skeleton"></div>
                    </div>
                    <div class="portfolio-item loading">
                        <div class="skeleton"></div>
                    </div>
                </div>
                <button id="load-more-btn" class="load-more-btn">加载更多</button>
            </div>
        </section>
        <!-- 联系我部分 -->
        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title">联系我</h2>
                <p class="contact-intro">有项目想合作？或者只是想打个招呼？随时欢迎！</p>
                <div class="contact-links">
                    <a href="mailto:your.email@example.com" class="contact-link">
                        <i class="fas fa-envelope"></i> your.email@example.com
                    </a>
                    <a href="https://github.com/yourusername" class="contact-link" target="_blank">
                        <i class="fab fa-github"></i> GitHub
                    </a>
                    <a href="https://linkedin.com/in/yourusername" class="contact-link" target="_blank">
                        <i class="fab fa-linkedin"></i> LinkedIn
                    </a>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 张三. All rights reserved.</p>
        </div>
    </footer>
    <!-- 返回顶部按钮 -->
    <a href="#" id="back-to-top" class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </a>
    <!-- 引入自定义脚本 -->
    <script src="script.js"></script>
</body>
</html>

CSS 代码 (style.css)

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #343a40;
    --text-color: #333;
    --bg-color: #ffffff;
    --section-bg: #f8f9fa;
    --card-bg: #ffffff;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* 暗色主题 */
body.dark-theme {
    --text-color: #f4f4f4;
    --bg-color: #1a1a1a;
    --section-bg: #2d2d2d;
    --card-bg: #3a3a3a;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth; /* 平滑滚动 */
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 0.3s, color 0.3s;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    margin-bottom: 1rem;
    line-height: 1.2;
}
h2.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 1rem;
}
h2.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--primary-color);
}
/* --- 导航栏 --- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--card-bg);
    box-shadow: var(--shadow);
    z-index: 1000;
    transition: background-color 0.3s;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}
.nav-links {
    display: flex;
    list-style: none;
}
.nav-links li {
    margin-left: 2rem;
}
.nav-link {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
    position: relative;
}
.nav-link:hover, .nav-link.active {
    color: var(--primary-color);
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}
/* --- 主要内容区块 --- */
section {
    padding: 80px 0;
    opacity: 0; /* 用于滚动动画 */
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
section.visible {
    opacity: 1;
    transform: translateY(0);
}
#home {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1557682257-2f9c37a3a5f5?ixlib=rb-4.0.3') no-repeat center center/cover;
}
.hero-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.highlight {
    color: var(--primary-color);
}
.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s, box-shadow 0.3s;
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
}
/* --- 关于我 --- */
.about {
    background-color: var(--section-bg);
}
.about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.about-text {
    flex: 1;
    padding-right: 2rem;
}
.about-image img {
    max-width: 300px;
    border-radius: 10px;
    box-shadow: var(--shadow);
}
/* --- 技能 --- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.skill-card {
    background-color: var(--card-bg);
    padding: 2rem;
    text-align: center;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
}
.skill-card:hover {
    transform: translateY(-10px);
}
.skill-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
/* --- 作品集 --- */
#portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.portfolio-item {
    background-color: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
}
.portfolio-item:hover {
    transform: scale(1.03);
}
.portfolio-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.portfolio-item-content {
    padding: 1.5rem;
}
.load-more-btn {
    display: block;
    margin: 2rem auto 0;
    padding: 10px 25px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.load-more-btn:hover {
    background-color: #0056b3;
}
/* 加载骨架屏 */
.skeleton {
    width: 100%;
    height: 250px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* --- 联系我 --- */
.contact {
    background-color: var(--section-bg);
    text-align: center;
}
.contact-intro {
    max-width: 600px;
    margin: 0 auto 2rem;
}
.contact-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
}
.contact-link:hover {
    color: var(--primary-color);
}
/* --- 页脚 --- */
footer {
    background-color: var(--secondary-color);
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
}
/* --- 返回顶部按钮 --- */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--primary-color);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
/* --- 主题切换按钮 --- */
.theme-toggle {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
}
/* --- 移动端响应式设计 --- */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* 默认隐藏，通过JS控制 */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--card-bg);
        flex-direction: column;
        text-align: center;
        padding: 1rem 0;
        box-shadow: var(--shadow);
    }
    .nav-links.active {
        display: flex;
    }
    .mobile-menu-btn {
        display: block;
        cursor: pointer;
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .about-content {
        flex-direction: column;
    }
    .about-text {
        padding-right: 0;
        margin-bottom: 2rem;
    }
    .about-image img {
        max-width: 100%;
    }
}

jQuery 代码 (script.js)

$(document).ready(function() {
    // --- 平滑滚动 ---
    $('.nav-link, .cta-button').on('click', function(e) {
        // 如果是移动端菜单，点击后关闭菜单
        if ($('.nav-links').hasClass('active')) {
            $('.nav-links').removeClass('active');
        }
        e.preventDefault();
        const target = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(target).offset().top - 70 // 减去导航栏高度
        }, 800);
    });
    // --- 导航栏高亮当前板块 ---
    $(window).scroll(function() {
        let scrollPosition = $(window).scrollTop();
        // 返回顶部按钮显示/隐藏
        if (scrollPosition > 500) {
            $('#back-to-top').addClass('visible');
        } else {
            $('#back-to-top').removeClass('visible');
        }
        // 导航栏高亮
        $('.section').each(function() {
            const target = $(this);
            const targetTop = target.offset().top - 100;
            const targetBottom = targetTop + target.outerHeight();
            const id = target.attr('id');
            if (scrollPosition >= targetTop && scrollPosition < targetBottom) {
                $('.nav-link').removeClass('active');
                $(`.nav-link[href="#${id}"]`).addClass('active');
            }
        });
    });
    // --- 滚动动画 ---
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -100px 0px'
    };
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                $(entry.target).addClass('visible');
            }
        });
    }, observerOptions);
    $('.section').each(function() {
        observer.observe(this[0] || this);
    });
    // --- 主题切换 ---
    $('#theme-toggle').on('click', function() {
        $('body').toggleClass('dark-theme');
        const icon = $(this).find('i');
        if ($('body').hasClass('dark-theme')) {
            icon.removeClass('fa-moon').addClass('fa-sun');
        } else {
            icon.removeClass('fa-sun').addClass('fa-moon');
        }
    });
    // --- 移动端菜单切换 ---
    $('.mobile-menu-btn').on('click', function() {
        $('.nav-links').toggleClass('active');
    });
    // --- 作品集动态加载 ---
    const portfolioItems = [
        { title: '项目一：在线商城', description: '使用 React 和 Node.js 构建的电商网站。', image: 'https://via.placeholder.com/400x300' },
        { title: '项目二：任务管理应用', description: '基于 Vue.js 的个人任务管理工具。', image: 'https://via.placeholder.com/400x300' },
        { title: '项目三：个人博客系统', description: '使用 WordPress 搭建的博客。', image: 'https://via.placeholder.com/400x300' },
        { title: '项目四：天气预报 App', description: '调用第三方 API 的移动端天气应用。', image: 'https://via.placeholder.com/400x300' },
        { title: '项目五：数据可视化看板', description: '使用 D3.js 展示销售数据。', image: 'https://via.placeholder.com/400x300' },
        { title: '项目六：小游戏：贪吃蛇', description: '使用原生 JavaScript 开发的网页小游戏。', image: 'https://via.placeholder.com/400x300' }
    ];
    let currentIndex = 0;
    const itemsPerLoad = 3;
    function loadMoreItems() {
        const $grid = $('#portfolio-grid');
        const endIndex = Math.min(currentIndex + itemsPerLoad, portfolioItems.length);
        for (let i = currentIndex; i < endIndex; i++) {
            const item = portfolioItems[i];
            const $item = $(`
                <div class="portfolio-item">
                    <img src="${item.image}" alt="${item.title}">
                    <div class="portfolio-item-content">
                        <h3>${item.title}</h3>
                        <p>${item.description}</p>
                    </div>
                </div>
            `);
            $grid.append($item);
        }
        currentIndex = endIndex;
        if (currentIndex >= portfolioItems.length) {
            $('#load-more-btn').hide();
        }
    }
    // 初始加载
    loadMoreItems();
    // 点击“加载更多”按钮
    $('#load-more-btn').on('click', function() {
        loadMoreItems();
    });
    // --- 返回顶部 ---
    $('#back-to-top').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: 0 }, 800);
    });
});

总结与扩展建议

这个模板为您提供了一个功能齐全、设计现代的个人网站起点,您可以根据自己的需求进行扩展：

大学生网页设计源代码模板jquery
（图片来源网络，侵删）
  1. : 替换所有占位符文本、图片和链接。
  2. 添加更多板块: 如“博客”、“经历”、“证书”等。
  3. 集成后端: 如果需要提交表单或存储数据，可以集成 Node.js, Python Flask/Django 等后端技术。
  4. 使用前端框架: 如果您想构建更复杂的应用，可以考虑使用 Vue.js 或 React 来重构,以获得更好的组件化开发体验。
  5. 部署: 将代码上传到 GitHub Pages, Netlify, Vercel 等平台,即可免费获得一个公开的网站。

希望这个模板对您有帮助！祝您学业有成,编程愉快！

大学生网页设计源代码模板jquery
（图片来源网络，侵删）