• 响应式设计：在电脑、平板和手机上都能完美显示。
  • 现代布局：使用 Flexbox 和 CSS Grid,布局灵活高效。
  • 功能模块：包含个人简介、技能展示、项目经验、联系方式等常见模块。
  • 交互效果：平滑滚动、悬停效果、技能条动画等。
  • 代码清晰：详细的注释,方便您理解和修改。

如何使用这个模板？

  1. 复制代码：将下面的完整代码复制到一个新的文本文件中。
  2. 保存文件：将文件另存为 index.html。
  3. ：用您自己的信息替换掉所有 [占位符] 部分的内容。
  4. 添加图片：在 assets/images 文件夹中放入您自己的照片和项目截图。
  5. 在浏览器中打开：直接用浏览器打开 index.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>
    <!-- 引入字体图标库 (Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入自定义CSS样式 -->
    <style>
        /* --- 全局样式重置和变量定义 --- */
        :root {
            --primary-color: #007BFF; /* 主色调，可自定义 */
            --secondary-color: #6c757d; /* 次要色调 */
            --text-color: #333;      /* 主要文字颜色 */
            --light-color: #f8f9fa;  /* 浅色背景 */
            --dark-color: #343a40;   /* 深色背景 */
            --max-width: 1200px;     /* 内容区域最大宽度 */
        }
        * {
            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: #fff;
        }
        h1, h2, h3, h4 {
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1rem;
        }
        a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        a:hover {
            color: #0056b3;
        }
        .container {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 2rem;
        }
        .section {
            padding: 4rem 0;
        }
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            position: relative;
        }
        .section-title::after {
            content: '';
            display: block;
            width: 50px;
            height: 4px;
            background: var(--primary-color);
            margin: 1rem auto;
        }
        .btn {
            display: inline-block;
            background: var(--primary-color);
            color: #fff;
            padding: 0.8rem 2rem;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.3s ease, transform 0.3s ease;
        }
        .btn:hover {
            background: #0056b3;
            transform: translateY(-2px);
        }
        /* --- 导航栏样式 --- */
        #navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
            transition: all 0.3s ease;
        }
        #navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
        }
        #navbar .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        #navbar .nav-links {
            display: flex;
            list-style: none;
        }
        #navbar .nav-links li {
            margin-left: 2rem;
        }
        #navbar .nav-links a {
            color: var(--text-color);
            font-weight: 500;
        }
        #navbar .nav-links a:hover {
            color: var(--primary-color);
        }
        /* --- 首页/英雄区样式 --- */
        #hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/images/hero-bg.jpg') no-repeat center center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
        }
        #hero .hero-content {
            max-width: 800px;
        }
        #hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }
        #hero h2 {
            font-size: 2rem;
            margin-bottom: 2rem;
            font-weight: 300;
        }
        #hero .hero-btns a {
            display: inline-block;
            margin: 0.5rem;
            padding: 0.8rem 2rem;
        }
        #hero .hero-btns .btn-light {
            background: transparent;
            border: 2px solid #fff;
            color: #fff;
        }
        #hero .hero-btns .btn-light:hover {
            background: #fff;
            color: var(--primary-color);
        }
        /* --- 关于我样式 --- */
        #about {
            background-color: var(--light-color);
        }
        .about-content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 3rem;
            align-items: center;
        }
        .about-img {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .about-img img {
            width: 100%;
            height: auto;
            display: block;
        }
        .about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }
        .about-text p {
            margin-bottom: 1rem;
        }
        /* --- 技能样式 --- */
        .skills {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }
        .skill-item {
            background: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        .skill-item i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }
        .skill-item h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        .skill-level {
            background: #e9ecef;
            height: 10px;
            border-radius: 5px;
            margin-top: 1rem;
            overflow: hidden;
        }
        .skill-level-bar {
            height: 100%;
            background: var(--primary-color);
            border-radius: 5px;
            width: 0; /* 初始为0，通过JS动画填充 */
            transition: width 2s ease-in-out;
        }
        /* --- 项目样式 --- */
        .projects {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        .project-card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }
        .project-img {
            height: 200px;
            overflow: hidden;
        }
        .project-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .project-card:hover .project-img img {
            transform: scale(1.1);
        }
        .project-info {
            padding: 1.5rem;
        }
        .project-info h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }
        .project-info p {
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }
        .project-links {
            display: flex;
            gap: 1rem;
        }
        .project-links a {
            color: var(--primary-color);
            font-size: 1.2rem;
        }
        /* --- 联系方式样式 --- */
        #contact {
            background-color: var(--dark-color);
            color: #fff;
            text-align: center;
        }
        #contact .section-title {
            color: #fff;
        }
        #contact .contact-info {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin-top: 2rem;
        }
        .contact-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .contact-item i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        .contact-item p {
            margin: 0;
        }
        /* --- 页脚样式 --- */
        #main-footer {
            background: #212529;
            color: #adb5bd;
            text-align: center;
            padding: 1.5rem 0;
        }
        /* --- 响应式设计 --- */
        @media (max-width: 768px) {
            #navbar .container {
                flex-direction: column;
                padding: 0.5rem;
            }
            #navbar .nav-links {
                margin-top: 1rem;
                flex-direction: column;
                text-align: center;
            }
            #navbar .nav-links li {
                margin: 0.5rem 0;
            }
            #hero h1 {
                font-size: 2.5rem;
            }
            #hero h2 {
                font-size: 1.5rem;
            }
            .about-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .contact-info {
                flex-direction: column;
                gap: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav id="navbar">
        <div class="container">
            <a href="#hero" class="logo">[您的名字]</a>
            <ul class="nav-links">
                <li><a href="#hero">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#skills">技能</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </div>
    </nav>
    <!-- 首页/英雄区 -->
    <section id="hero">
        <div class="hero-content">
            <h1>[您的名字]</h1>
            <h2>[您的职位，前端开发工程师 / UI设计师 / 产品经理]</h2>
            <p>用技术创造价值，用设计点亮生活。</p>
            <div class="hero-btns">
                <a href="#about" class="btn">了解更多</a>
                <a href="#contact" class="btn btn-light">联系我</a>
            </div>
        </div>
    </section>
    <!-- 关于我 -->
    <section id="about" class="section">
        <div class="container">
            <h2 class="section-title">关于我</h2>
            <div class="about-content">
                <div class="about-img">
                    <img src="assets/images/profile-pic.jpg" alt="[您的名字]的个人照片">
                </div>
                <div class="about-text">
                    <h3>你好，我是[您的名字]</h3>
                    <p>
                        [在这里写一段关于您的介绍，我是一名充满激情的前端开发工程师，拥有5年的Web开发经验，我热衷于学习新技术，并致力于构建用户友好、高性能的Web应用程序，]
                    </p>
                    <p>
                        [继续介绍您的经历、理念或爱好，我毕业于[您的大学]，主修[您的专业]，在过去的职业生涯中，我曾参与过多个大型项目的开发，积累了丰富的团队协作和项目管理经验，]
                    </p>
                    <p>
                        [可以加上一句座右铭或个人理念，我相信，好的代码不仅要能运行，更要易于维护和扩展，]
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- 技能 -->
    <section id="skills" class="section">
        <div class="container">
            <h2 class="section-title">我的技能</h2>
            <div class="skills">
                <div class="skill-item">
                    <i class="fab fa-html5"></i>
                    <h3>HTML5 / CSS3</h3>
                    <p>精通语义化标签和现代CSS布局技术</p>
                    <div class="skill-level">
                        <div class="skill-level-bar" data-level="90%"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <i class="fab fa-js-square"></i>
                    <h3>JavaScript</h3>
                    <p>熟练掌握ES6+语法及异步编程</p>
                    <div class="skill-level">
                        <div class="skill-level-bar" data-level="85%"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <i class="fab fa-react"></i>
                    <h3>React / Vue</h3>
                    <p>熟悉主流前端框架及其生态系统</p>
                    <div class="skill-level">
                        <div class="skill-level-bar" data-level="80%"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <i class="fab fa-node-js"></i>
                    <h3>Node.js</h3>
                    <p>具备服务端开发能力，能独立开发RESTful API</p>
                    <div class="skill-level">
                        <div class="skill-level-bar" data-level="70%"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 项目 -->
    <section id="projects" class="section">
        <div class="container">
            <h2 class="section-title">我的项目</h2>
            <div class="projects">
                <div class="project-card">
                    <div class="project-img">
                        <img src="assets/images/project1.jpg" alt="项目1截图">
                    </div>
                    <div class="project-info">
                        <h3>项目名称一：在线商城</h3>
                        <p>一个功能完整的B2C电商平台，包含商品展示、购物车、订单管理等核心功能。</p>
                        <div class="project-links">
                            <a href="https://github.com/yourusername/project1" target="_blank"><i class="fab fa-github"></i></a>
                            <a href="https://your-project-demo-url.com" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                        </div>
                    </div>
                </div>
                <div class="project-card">
                    <div class="project-img">
                        <img src="assets/images/project2.jpg" alt="项目2截图">
                    </div>
                    <div class="project-info">
                        <h3>项目名称二：任务管理应用</h3>
                        <p>一个基于React的看板式任务管理工具，支持拖拽排序和团队协作。</p>
                        <div class="project-links">
                            <a href="https://github.com/yourusername/project2" target="_blank"><i class="fab fa-github"></i></a>
                            <a href="https://your-project-demo-url.com" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                        </div>
                    </div>
                </div>
                <div class="project-card">
                    <div class="project-img">
                        <img src="assets/images/project3.jpg" alt="项目3截图">
                    </div>
                    <div class="project-info">
                        <h3>项目名称三：个人博客系统</h3>
                        <p>使用Vue和Node.js构建的个人博客，支持Markdown编辑和评论系统。</p>
                        <div class="project-links">
                            <a href="https://github.com/yourusername/project3" target="_blank"><i class="fab fa-github"></i></a>
                            <a href="https://your-project-demo-url.com" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 联系方式 -->
    <section id="contact" class="section">
        <div class="container">
            <h2 class="section-title">联系我</h2>
            <p>如果您对我的工作感兴趣，或者有任何问题，欢迎随时与我联系！</p>
            <div class="contact-info">
                <div class="contact-item">
                    <i class="fas fa-envelope"></i>
                    <p>your.email@example.com</p>
                </div>
                <div class="contact-item">
                    <i class="fab fa-github"></i>
                    <p>github.com/yourusername</p>
                </div>
                <div class="contact-item">
                    <i class="fab fa-linkedin"></i>
                    <p>linkedin.com/in/yourprofile</p>
                </div>
                <div class="contact-item">
                    <i class="fab fa-weixin"></i>
                    <p>YourWeChatID</p>
                </div>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer id="main-footer">
        <div class="container">
            <p>&copy; [当前年份] [您的名字]. All Rights Reserved.</p>
        </div>
    </footer>
    <!-- 引入自定义JavaScript -->
    <script>
        // --- 技能条动画 ---
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有技能条元素
            const skillBars = document.querySelectorAll('.skill-level-bar');
            // 创建一个观察器实例
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    // 如果元素进入视口
                    if (entry.isIntersecting) {
                        const bar = entry.target;
                        const level = bar.getAttribute('data-level');
                        // 设置宽度，触发CSS过渡动画
                        bar.style.width = level;
                        // 动画结束后，停止观察该元素，避免重复触发
                        observer.unobserve(bar);
                    }
                });
            }, {
                threshold: 0.7 // 当70%的元素可见时触发
            });
            // 开始观察每个技能条
            skillBars.forEach(bar => {
                observer.observe(bar);
            });
        });
        // --- 导航栏滚动效果 ---
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 100) { // 当页面滚动超过100px时
                navbar.style.background = 'rgba(255, 255, 255, 0.98)';
                navbar.style.boxShadow = '0 2px 15px rgba(0,0,0,0.1)';
            } else {
                navbar.style.background = 'rgba(255, 255, 255, 0.95)';
                navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
            }
        });
        // --- 活跃导航链接高亮 ---
        const sections = document.querySelectorAll('section');
        const navLinks = document.querySelectorAll('.nav-links a');
        window.addEventListener('scroll', () => {
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (scrollY >= (sectionTop - 200)) {
                    current = section.getAttribute('id');
                }
            });
            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href').slice(1) === current) {
                    link.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>

文件夹结构建议

为了让您的项目更有条理，建议创建如下的文件夹结构，并将图片放入 assets/images 文件夹中。

html个人网页完整代码模板
（图片来源网络，侵删）
your-portfolio/
├── index.html          (上面的完整代码)
├── assets/
│   └── images/
│       ├── hero-bg.jpg      (首页背景图)
│       ├── profile-pic.jpg  (您的个人照片)
│       ├── project1.jpg     (项目1截图)
│       ├── project2.jpg     (项目2截图)
│       └── project3.jpg     (项目3截图)
└── (其他可选文件，如CSS, JS文件等)

下一步可以做什么？

  1. 自定义颜色：修改 root 中的 --primary-color 等变量来改变网站主题色。
  2. 添加更多交互：可以添加一个表单来收集访客留言,或者集成一个留言板服务。
  3. 优化性能：将CSS和JS文件分离到外部文件中,并考虑使用CDN来加载资源。
  4. 部署上线：将您的网站部署到 GitHub Pages、Netlify 或 Vercel 等免费平台上,让更多人看到。

希望这个模板能帮助您快速搭建出属于自己的专业个人网页！

html个人网页完整代码模板
（图片来源网络，侵删）