如何获取网页首页的附源代码？-网页设计-锦华智联科技

响应式设计：在桌面、平板和手机上都有良好的显示效果。
现代布局：使用 Flexbox 和 CSS Grid 布局,结构清晰。
交互效果：平滑的滚动、导航栏悬停效果、按钮动画。
功能区块：包含导航、英雄区、关于我、技能、项目展示和联系表单等常见模块。
易于定制：代码结构清晰，您只需修改 HTML 中的文本和 CSS 中的颜色、图片链接即可。

如何使用

创建文件：在您的电脑上创建一个文件夹，然后在文件夹中创建三个文件：index.html、style.css 和 script.js。
复制代码：将下面提供的代码分别复制到对应的文件中。
打开预览：用浏览器打开 index.html 文件,您就能看到网页效果了。
开始定制：根据您的需求修改 HTML 中的内容，并通过 style.css 调整样式。

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>
    <link rel="stylesheet" href="style.css">
    <!-- 引入一个图标库，方便使用图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <a href="#" class="logo">张三</a>
        <nav class="navbar">
            <a href="#home" class="active">首页</a>
            <a href="#about">关于我</a>
            <a href="#skills">技能</a>
            <a href="#projects">项目</a>
            <a href="#contact">联系</a>
        </nav>
        <div class="toggle-menu">
            <i class="fas fa-bars"></i>
        </div>
    </header>
    <main>
        <!-- 英雄区 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>你好，我是 <span class="highlight">张三</span></h1>
                <p>一名充满热情的前端开发工程师 & UI/UX 设计师</p>
                <div class="hero-buttons">
                    <a href="#projects" class="btn">查看作品</a>
                    <a href="#contact" class="btn btn-secondary">联系我</a>
                </div>
            </div>
            <div class="hero-image">
                <!-- 您可以在这里替换成自己的图片 -->
                <img src="https://images.unsplash.com/photo-1557862921-37829c790f19?q=80&w=1887&auto=format&fit=crop" alt="张三的头像">
            </div>
        </section>
        <!-- 关于我 -->
        <section id="about" class="about">
            <h2 class="section-title">关于我</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>我是一名专注于创造优雅、高效用户界面的前端开发者，我热爱将复杂的问题转化为简单、直观且富有吸引力的设计方案。</p>
                    <p>拥有 5 年的行业经验，我精通现代前端技术栈，包括 HTML5, CSS3, JavaScript (ES6+), 以及 React, Vue 等主流框架，我相信，好的代码不仅要功能完善，更要易于维护和扩展。</p>
                    <p>在工作之余，我喜欢探索新的技术，参与开源项目，并通过写博客来分享我的学习心得。</p>
                </div>
                <div class="about-stats">
                    <div class="stat-item">
                        <h3>50+</h3>
                        <p>完成项目</p>
                    </div>
                    <div class="stat-item">
                        <h3>5</h3>
                        <p>工作年限</p>
                    </div>
                    <div class="stat-item">
                        <h3>20+</h3>
                        <p>满意客户</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 技能 -->
        <section id="skills" class="skills">
            <h2 class="section-title">我的技能</h2>
            <div class="skills-container">
                <div class="skill-category">
                    <h3>前端开发</h3>
                    <div class="skill-bar">
                        <div class="skill" data-skill="90">HTML / CSS</div>
                    </div>
                    <div class="skill-bar">
                        <div class="skill" data-skill="85">JavaScript / TypeScript</div>
                    </div>
                    <div class="skill-bar">
                        <div class="skill" data-skill="80">React / Vue</div>
                    </div>
                </div>
                <div class="skill-category">
                    <h3>设计工具</h3>
                    <div class="skill-bar">
                        <div class="skill" data-skill="75">Figma / Sketch</div>
                    </div>
                    <div class="skill-bar">
                        <div class="skill" data-skill="70">Photoshop / Illustrator</div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 项目展示 -->
        <section id="projects" class="projects">
            <h2 class="section-title">我的项目</h2>
            <div class="projects-container">
                <div class="project-card">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop" alt="项目1">
                    <div class="project-info">
                        <h3>电商平台重构</h3>
                        <p>使用 React 和 Redux 重构了一个大型电商平台，提升了页面加载速度 40%。</p>
                        <div class="project-tags">
                            <span>React</span>
                            <span>Redux</span>
                            <span>Node.js</span>
                        </div>
                        <a href="#" class="btn">查看详情</a>
                    </div>
                </div>
                <div class="project-card">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop" alt="项目2">
                    <div class="project-info">
                        <h3>任务管理应用</h3>
                        <p>一个功能丰富的任务管理工具，支持拖拽排序、团队协作和实时通知。</p>
                        <div class="project-tags">
                            <span>Vue.js</span>
                            <span>Vuex</span>
                            <span>Element UI</span>
                        </div>
                        <a href="#" class="btn">查看详情</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 联系我 -->
        <section id="contact" class="contact">
            <h2 class="section-title">联系我</h2>
            <p>有项目想法？让我们一起聊聊吧！</p>
            <form class="contact-form">
                <input type="text" placeholder="您的姓名" required>
                <input type="email" placeholder="您的邮箱" required>
                <textarea placeholder="您的留言" rows="5" required></textarea>
                <button type="submit" class="btn">发送消息</button>
            </form>
            <div class="social-links">
                <a href="#"><i class="fab fa-github"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-dribbble"></i></a>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer>
        <p>&copy; 2025 张三. All rights reserved.</p>
    </footer>
    <!-- 返回顶部按钮 -->
    <a href="#home" 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: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --text-color: #333;
    --light-bg: #f4f4f4;
    --white: #fff;
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--light-bg);
    color: var(--text-color);
    line-height: 1.6;
}
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--secondary-color);
    position: relative;
}
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--primary-color);
    margin: 1rem auto;
    border-radius: 2px;
}
.btn {
    display: inline-block;
    padding: 12px 25px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}
.btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
}
.btn-secondary {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}
.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--white);
}
/* --- 导航栏 --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    background: var(--white);
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}
.logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--secondary-color);
    text-decoration: none;
}
.navbar a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    margin-left: 30px;
    transition: color 0.3s;
}
.navbar a:hover, .navbar a.active {
    color: var(--primary-color);
}
.toggle-menu {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}
/* --- 英雄区 --- */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 150px 100px 100px;
    min-height: 100vh;
    background: var(--white);
}
.hero-content {
    flex: 1;
    padding-right: 50px;
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}
.hero-content .highlight {
    color: var(--primary-color);
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #666;
}
.hero-buttons {
    display: flex;
    gap: 20px;
}
.hero-image {
    flex: 1;
    text-align: center;
}
.hero-image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: var(--shadow);
}
/* --- 关于我 --- */
.about {
    padding: 100px;
    background: var(--white);
}
.about-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}
.about-text p {
    margin-bottom: 1.5rem;
}
.about-stats {
    display: flex;
    gap: 30px;
}
.stat-item {
    text-align: center;
    padding: 20px;
    background: var(--light-bg);
    border-radius: 10px;
}
.stat-item h3 {
    font-size: 2rem;
    color: var(--primary-color);
}
/* --- 技能 --- */
.skills {
    padding: 100px;
    background: var(--light-bg);
}
.skills-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
}
.skill-category {
    flex: 1;
    min-width: 300px;
}
.skill-category h3 {
    margin-bottom: 1.5rem;
    color: var(--secondary-color);
}
.skill-bar {
    margin-bottom: 1.5rem;
}
.skill {
    height: 15px;
    background: #ddd;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.skill::after {
    content: attr(data-skill) '%';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-color);
    border-radius: 10px;
    width: 0;
    transition: width 2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    color: var(--white);
    font-size: 0.8rem;
}
/* --- 项目展示 --- */
.projects {
    padding: 100px;
    background: var(--white);
}
.projects-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}
.project-card {
    background: var(--light-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
}
.project-card:hover {
    transform: translateY(-10px);
}
.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.project-info {
    padding: 20px;
}
.project-info h3 {
    margin-bottom: 10px;
    color: var(--secondary-color);
}
.project-info p {
    margin-bottom: 15px;
    color: #666;
}
.project-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.project-tags span {
    background: var(--primary-color);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
}
/* --- 联系我 --- */
.contact {
    padding: 100px;
    background: var(--light-bg);
    text-align: center;
}
.contact p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: #666;
}
.contact-form {
    max-width: 600px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}
.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--secondary-color);
    color: var(--white);
    border-radius: 50%;
    font-size: 1.2rem;
    transition: background 0.3s, transform 0.3s;
}
.social-links a:hover {
    background: var(--primary-color);
    transform: scale(1.1);
}
/* --- 页脚 --- */
footer {
    text-align: center;
    padding: 20px;
    background: var(--secondary-color);
    color: var(--white);
}
/* --- 返回顶部按钮 --- */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: var(--white);
    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.show {
    opacity: 1;
    visibility: visible;
}
/* --- 响应式设计 --- */
@media (max-width: 992px) {
    header {
        padding: 20px 50px;
    }
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 150px 50px 100px;
    }
    .hero-content {
        padding-right: 0;
        margin-bottom: 50px;
    }
    .about-content {
        flex-direction: column;
    }
    .skills-container {
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    .navbar {
        position: fixed;
        top: 70px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--white);
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: 50px;
        transition: right 0.3s;
    }
    .navbar.active {
        right: 0;
    }
    .navbar a {
        margin: 10px 0;
        font-size: 1.2rem;
    }
    .toggle-menu {
        display: block;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .about-stats {
        flex-direction: column;
    }
    .projects-container {
        grid-template-columns: 1fr;
    }
    .contact-form {
        padding: 0 20px;
    }
}

JavaScript 代码 (`script.js`)

这是网页的脚本，用于处理交互逻辑，如移动端菜单切换、滚动效果等。

// 移动端菜单切换
const toggleMenu = document.querySelector('.toggle-menu');
const navbar = document.querySelector('.navbar');
toggleMenu.addEventListener('click', () => {
    navbar.classList.toggle('active');
});
// 点击导航链接后关闭移动端菜单
const navLinks = document.querySelectorAll('.navbar a');
navLinks.forEach(link => {
    link.addEventListener('click', () => {
        navbar.classList.remove('active');
    });
});
// 返回顶部按钮
const backToTopButton = document.querySelector('.back-to-top');
window.addEventListener('scroll', () => {
    // 如果页面滚动超过100px，显示返回顶部按钮
    if (window.scrollY > 100) {
        backToTopButton.classList.add('show');
    } else {
        backToTopButton.classList.remove('show');
    }
});
// 点击返回顶部按钮，平滑滚动到页面顶部
backToTopButton.addEventListener('click', (e) => {
    e.preventDefault();
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
// 技能条动画
const skillBars = document.querySelectorAll('.skill');
const animateSkills = () => {
    skillBars.forEach(bar => {
        const skill = bar.getAttribute('data-skill');
        // 当技能条进入视口时，设置其宽度
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    bar.style.width = skill + '%';
                    observer.unobserve(entry.target);
                }
            });
        });
        observer.observe(bar);
    });
};
// 页面加载完成后执行技能条动画
window.addEventListener('load', animateSkills);
// 联系表单提交（简单的示例）
const contactForm = document.querySelector('.contact-form');
contactForm.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    // 在实际应用中，这里应该使用 AJAX 或 Fetch API 将表单数据发送到服务器
    // 这里只是一个简单的模拟
    const formData = new FormData(contactForm);
    const name = formData.get('name'); // 注意：input 需要有 name 属性
    // 显示一个成功消息
    alert(`感谢您的留言，${name}！我会尽快回复您，`);
    // 清空表单
    contactForm.reset();
});

您现在拥有了一个功能齐全、设计现代的个人首页,您可以：

：在 index.html 中更改文本、标题和链接。
更换图片：将 src 属性中的图片链接替换为您自己的图片。
调整颜色：在 style.css 的 root 部分修改 CSS 变量,快速改变整个网站的配色方案。
添加功能：在 script.js 中添加更多交互，比如轮播图、模态框等。

希望这个源代码对您有帮助！

（图片来源网络，侵删）

如何获取网页首页的附源代码？

如何使用

HTML 代码 (index.html)

CSS 代码 (style.css)

JavaScript 代码 (script.js)

HTML 代码 (`index.html`)

CSS 代码 (`style.css`)

JavaScript 代码 (`script.js`)