如何用HTML设计简单网页作品？-网页设计-锦华智联科技

这里为你设计一个简单但功能完整、视觉美观的HTML网页作品，这个作品将展示一个现代的个人作品集/简历网站，包含了响应式设计、交互效果和动画。

（图片来源网络，侵删）

这个作品非常适合作为初学者的学习案例，因为它融合了HTML、CSS和JavaScript的核心知识点。

网页作品：个人作品集 / 简历网站

🎨 设计理念

简洁现代：采用干净、大气的布局,突出内容本身。
响应式：在电脑、平板和手机上都能有良好的浏览体验。
交互友好：平滑滚动、悬停效果和导航高亮,提升用户体验。
单页应用都在一个页面上,通过导航菜单快速定位。

🛠️ 技术栈

HTML5: 语义化标签构建页面结构。
CSS3: Flexbox/Grid布局、动画、渐变、媒体查询实现响应式和美观样式。
JavaScript (原生): 实现平滑滚动和导航栏滚动效果。

📁 文件结构

为了保持项目整洁,我们创建一个简单的文件夹结构：

my-portfolio/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js

📄 代码实现

`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="css/style.css">
    <!-- 引入一个图标库，美化导航图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <a href="#home" class="logo">张三</a>
            <nav>
                <a href="#home" class="nav-link active">首页</a>
                <a href="#about" class="nav-link">关于我</a>
                <a href="#skills" class="nav-link">技能</a>
                <a href="#projects" class="nav-link">项目</a>
                <a href="#contact" class="nav-link">联系我</a>
            </nav>
        </div>
    </header>
    <main>
        <!-- 首页部分 -->
        <section id="home" class="hero">
            <div class="container">
                <h1>你好，我是 <span class="highlight">张三</span></h1>
                <p>一名充满激情的前端开发工程师</p>
                <a href="#projects" class="btn">查看我的作品</a>
            </div>
        </section>
        <!-- 关于我部分 -->
        <section id="about" class="about">
            <div class="container">
                <h2>关于我</h2>
                <p>我是一名热爱创造优美和高效界面的前端开发者，我专注于使用现代的Web技术，如HTML5, CSS3和JavaScript，来构建响应式的、用户友好的网站，我相信，好的设计不仅仅是美观，更是功能与体验的完美结合。</p>
            </div>
        </section>
        <!-- 技能部分 -->
        <section id="skills" class="skills">
            <div class="container">
                <h2>我的技能</h2>
                <div class="skill-bars">
                    <div class="skill">
                        <span class="skill-name">HTML / CSS</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <span class="skill-name">JavaScript</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <span class="skill-name">React</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 75%"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <span class="skill-name">UI/UX 设计</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 70%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 项目部分 -->
        <section id="projects" class="projects">
            <div class="container">
                <h2>我的项目</h2>
                <div class="project-grid">
                    <div class="project-card">
                        <div class="project-img" style="background-color: #4facfe;"></div>
                        <h3>电商网站</h3>
                        <p>一个使用React和Node.js构建的全栈电商平台。</p>
                    </div>
                    <div class="project-card">
                        <div class="project-img" style="background-color: #00f2fe;"></div>
                        <h3>任务管理应用</h3>
                        <p>一个简洁优雅的在线任务管理和协作工具。</p>
                    </div>
                    <div class="project-card">
                        <div class="project-img" style="background-color: #43e97b;"></div>
                        <h3>个人博客</h3>
                        <p>使用Vue.js和Markdown语法构建的个人博客系统。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 联系我部分 -->
        <section id="contact" class="contact">
            <div class="container">
                <h2>联系我</h2>
                <p>有项目想法？让我们一起聊聊吧！</p>
                <div class="social-links">
                    <a href="mailto:zhangsan@example.com"><i class="fas fa-envelope"></i></a>
                    <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>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 张三. All rights reserved.</p>
        </div>
    </footer>
    <script src="js/script.js"></script>
</body>
</html>

`css/style.css` (网页样式)

/* --- 全局样式 --- */
:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --text-color: #333;
    --light-bg: #f4f4f4;
    --white: #fff;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}
.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}
h1, h2, h3 {
    font-weight: 600;
    line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; text-align: center; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; }
p { margin-bottom: 1rem; }
.btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white);
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s ease;
}
.btn:hover {
    background: #2980b9;
}
/* --- 导航栏 --- */
.navbar {
    background: var(--white);
    color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background 0.3s ease;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}
.navbar nav a {
    color: var(--secondary-color);
    text-decoration: none;
    margin-left: 1.5rem;
    font-weight: 500;
    transition: color 0.3s ease;
}
.navbar nav a:hover,
.navbar nav a.active {
    color: var(--primary-color);
}
/* --- 各个部分 --- */
section {
    padding: 4rem 0;
}
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
    color: var(--white);
    height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
}
.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; }
.hero .highlight { color: var(--primary-color); }
.hero p { font-size: 1.2rem; margin-bottom: 2rem; }
.about, .contact { background: var(--light-bg); }
.skills, .projects { background: var(--white); }
/* --- 技能条 --- */
.skill-bars {
    max-width: 600px;
    margin: 0 auto;
}
.skill {
    margin-bottom: 1.5rem;
}
.skill-name {
    display: block;
    margin-bottom: 0.5rem;
}
.skill-bar {
    background: #ddd;
    height: 10px;
    border-radius: 5px;
}
.skill-progress {
    height: 100%;
    background: var(--primary-color);
    border-radius: 5px;
    width: 0; /* 初始为0，由JS控制动画 */
    transition: width 1.5s ease-in-out;
}
/* --- 项目卡片 --- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    text-align: center;
}
.project-card {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.project-card:hover {
    transform: translateY(-10px);
}
.project-img {
    height: 200px;
}
.project-card h3 {
    padding: 1rem;
    background: var(--secondary-color);
    color: var(--white);
    margin: 0;
}
.project-card p {
    padding: 0 1rem 1rem;
}
/* --- 联系方式 --- */
.social-links {
    text-align: center;
}
.social-links a {
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin: 0 1rem;
    transition: color 0.3s ease;
}
.social-links a:hover {
    color: var(--primary-color);
}
/* --- 页脚 --- */
footer {
    background: var(--secondary-color);
    color: var(--white);
    text-align: center;
    padding: 1rem 0;
}
/* --- 响应式设计 --- */
@media(max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        text-align: center;
    }
    .navbar nav a {
        margin: 0 1rem;
        display: inline-block;
    }
    .hero h1 { font-size: 2.5rem; }
    section { padding: 2rem 0; }
}

`js/script.js` (网页交互)

// 等待DOM完全加载
document.addEventListener('DOMContentLoaded', () => {
    // 1. 平滑滚动效果
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            if (targetSection) {
                window.scrollTo({
                    top: targetSection.offsetTop - 70, // 减去导航栏高度，避免内容被遮挡
                    behavior: 'smooth'
                });
            }
        });
    });
    // 2. 导航栏滚动高亮效果
    const sections = document.querySelectorAll('section');
    const navLinks = document.querySelectorAll('.navbar nav a');
    window.addEventListener('scroll', () => {
        let current = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            if (pageYOffset >= sectionTop - 200) {
                current = section.getAttribute('id');
            }
        });
        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href').slice(1) === current) {
                link.classList.add('active');
            }
        });
        // 3. 导航栏背景色变化
        const navbar = document.querySelector('.navbar');
        if (window.scrollY > 50) {
            navbar.style.background = 'rgba(255, 255, 255, 0.95)';
        } else {
            navbar.style.background = 'var(--white)';
        }
    });
    // 4. 技能条动画（当滚动到技能部分时触发）
    const skillBars = document.querySelectorAll('.skill-progress');
    const skillsSection = document.querySelector('.skills');
    const animateSkillBars = () => {
        skillBars.forEach(bar => {
            const barWidth = bar.style.width;
            bar.style.width = '0';
            setTimeout(() => {
                bar.style.width = barWidth;
            }, 200);
        });
    };
    // 使用 Intersection Observer API 来检测元素是否进入视口
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5
    };
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateSkillBars();
                observer.unobserve(entry.target); // 触发一次后停止观察
            }
        });
    }, observerOptions);
    if (skillsSection) {
        observer.observe(skillsSection);
    }
});

🚀 如何运行

创建文件夹：在你的电脑上创建一个名为 my-portfolio 的文件夹。
创建子文件夹：在 my-portfolio 文件夹内，分别创建 css 和 js 文件夹。
保存文件：将上面的代码分别复制并粘贴到对应的文件中 (index.html, css/style.css, js/script.js)。
打开网页：用任意浏览器（如 Chrome, Firefox）打开 index.html 文件。

🎯 作品亮点总结

结构清晰：使用语义化标签（<header>, <main>, <section>, <footer>）让代码更易读、SEO友好。
视觉美观：渐变背景、卡片阴影、悬停效果等,让页面富有层次感和现代感。
响应式布局：通过媒体查询，确保在手机、平板等不同设备上都能完美展示。
交互体验：
- 点击导航链接平滑滚动到对应部分。
- 滚动时自动高亮当前所在的页面部分。
- 滚动时导航栏背景色动态变化。
- 滚动到“技能”部分时,技能条会以动画形式填充。
模块化：HTML, CSS, JavaScript 分离,便于维护和扩展。

这个作品是一个非常好的起点，你可以在此基础上进行修改和扩展，比如添加更多的项目、一个联系表单、或者更复杂的动画效果,祝你学习愉快！