编程马·菜鸟教程

Appearance

综合实战项目 ​

18.1 个人博客首页 ​

项目目标 ​

创建一个个人博客首页，包含导航、文章列表、侧边栏等功能。

技术要点 ​

  • 语义化标签：header、nav、main、section、article、aside、footer
  • 图片标签：img
  • 链接标签：a
  • 列表标签：ul、li

实现代码 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        header {
            background-color: #333;
            color: white;
            padding: 20px;
        }
        
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        nav ul {
            list-style: none;
            display: flex;
        }
        
        nav li {
            margin-left: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        nav a:hover {
            color: #3498db;
        }
        
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 20px;
        }
        
        .content {
            flex: 3;
        }
        
        .sidebar {
            flex: 1;
        }
        
        .article {
            background-color: white;
            padding: 30px;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .article h2 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .article-meta {
            color: #7f8c8d;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .article img {
            max-width: 100%;
            height: auto;
            margin: 20px 0;
            border-radius: 5px;
        }
        
        .article-excerpt {
            margin-bottom: 20px;
        }
        
        .read-more {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 8px 15px;
            border-radius: 3px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        
        .read-more:hover {
            background-color: #2980b9;
        }
        
        .sidebar-section {
            background-color: white;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .sidebar-section h3 {
            color: #34495e;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .sidebar-section ul {
            list-style: none;
        }
        
        .sidebar-section li {
            margin-bottom: 10px;
        }
        
        .sidebar-section a {
            color: #3498db;
            text-decoration: none;
        }
        
        .sidebar-section a:hover {
            text-decoration: underline;
        }
        
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .tag {
            background-color: #f9f9f9;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 14px;
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 30px;
        }
        
        @media (max-width: 768px) {
            main {
                flex-direction: column;
            }
            
            .header-container {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }
            
            nav ul {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-container">
            <div class="logo">个人博客</div>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">文章</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main>
        <div class="content">
            <article class="article">
                <h2>HTML语义化开发的重要性</h2>
                <div class="article-meta">
                    <span>发布时间：2026-01-01</span> | 
                    <span>分类：前端开发</span>
                </div>
                <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=semantic%20html%20coding&image_size=landscape_16_9" alt="HTML语义化开发">
                <p class="article-excerpt">HTML语义化是前端开发中的重要概念，它指的是使用正确的HTML标签来表示页面内容的含义，让代码更具可读性和可维护性，同时提升SEO效果。本文将详细介绍HTML语义化的重要性和实践方法。</p>
                <a href="#" class="read-more">阅读更多</a>
            </article>
            
            <article class="article">
                <h2>CSS Flexbox布局指南</h2>
                <div class="article-meta">
                    <span>发布时间：2025-12-25</span> | 
                    <span>分类：前端开发</span>
                </div>
                <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=css%20flexbox%20layout&image_size=landscape_16_9" alt="CSS Flexbox布局">
                <p class="article-excerpt">Flexbox是CSS中用于布局的强大工具，它可以轻松实现各种复杂的布局效果。本文将详细介绍Flexbox的基本概念、常用属性和实际应用场景。</p>
                <a href="#" class="read-more">阅读更多</a>
            </article>
            
            <article class="article">
                <h2>JavaScript异步编程详解</h2>
                <div class="article-meta">
                    <span>发布时间：2025-12-20</span> | 
                    <span>分类：前端开发</span>
                </div>
                <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=javascript%20async%20programming&image_size=landscape_16_9" alt="JavaScript异步编程">
                <p class="article-excerpt">异步编程是JavaScript中的重要概念，它可以帮助我们处理耗时操作，提高应用的性能和用户体验。本文将详细介绍JavaScript异步编程的各种方法，包括回调函数、Promise和async/await。</p>
                <a href="#" class="read-more">阅读更多</a>
            </article>
        </div>
        
        <div class="sidebar">
            <div class="sidebar-section">
                <h3>关于我</h3>
                <p>我是一名前端开发工程师，热爱编程和技术分享。欢迎访问我的博客，了解更多前端开发相关的知识。</p>
            </div>
            
            <div class="sidebar-section">
                <h3>最新文章</h3>
                <ul>
                    <li><a href="#">HTML语义化开发的重要性</a></li>
                    <li><a href="#">CSS Flexbox布局指南</a></li>
                    <li><a href="#">JavaScript异步编程详解</a></li>
                    <li><a href="#">响应式网页设计技巧</a></li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h3>热门标签</h3>
                <div class="tags">
                    <a href="#" class="tag">HTML</a>
                    <a href="#" class="tag">CSS</a>
                    <a href="#" class="tag">JavaScript</a>
                    <a href="#" class="tag">前端开发</a>
                    <a href="#" class="tag">SEO</a>
                    <a href="#" class="tag">响应式设计</a>
                </div>
            </div>
        </div>
    </main>
    
    <footer>
        <p>© 2026 个人博客 版权所有</p>
    </footer>
</body>
</html>

18.2 商品展示页面 ​

项目目标 ​

创建一个商品展示页面，展示商品信息和价格。

技术要点 ​

  • 表格标签：table、tr、td、th
  • 图片标签：img
  • 链接标签：a
  • 分区标签：div

实现代码 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品展示页面</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .product-card {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
        }
        
        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #34495e;
        }
        
        .product-description {
            color: #7f8c8d;
            margin-bottom: 15px;
            font-size: 14px;
        }
        
        .product-price {
            font-size: 20px;
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 15px;
        }
        
        .add-to-cart {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .add-to-cart:hover {
            background-color: #2980b9;
        }
        
        .product-table {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        th {
            background-color: #3498db;
            color: white;
            font-weight: bold;
        }
        
        tr:hover {
            background-color: #f5f5f5;
        }
        
        .table-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 3px;
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <header>
        <h1>商品展示</h1>
    </header>
    
    <div class="container">
        <h2>热门商品</h2>
        <div class="product-grid">
            <div class="product-card">
                <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=laptop%20computer&image_size=square" alt="笔记本电脑" class="product-image">
                <div class="product-info">
                    <h3 class="product-title">笔记本电脑</h3>
                    <p class="product-description">高性能笔记本电脑，适合办公和游戏</p>
                    <div class="product-price">¥5999</div>
                    <button class="add-to-cart">加入购物车</button>
                </div>
            </div>
            
            <div class="product-card">
                <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=smartphone&image_size=square" alt="智能手机" class="product-image">
                <div class="product-info">
                    <h3 class="product-title">智能手机</h3>
                    <p class="product-description">最新款智能手机，拍照效果出色</p>
                    <div class="product-price">¥3999</div>
                    <button class="add-to-cart">加入购物车</button>
                </div>
            </div>
            
            <div class="product-card">
                <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=tablet%20device&image_size=square" alt="平板电脑" class="product-image">
                <div class="product-info">
                    <h3 class="product-title">平板电脑</h3>
                    <p class="product-description">轻薄便携，适合娱乐和学习</p>
                    <div class="product-price">¥2999</div>
                    <button class="add-to-cart">加入购物车</button>
                </div>
            </div>
        </div>
        
        <h2>商品列表</h2>
        <div class="product-table">
            <table>
                <thead>
                    <tr>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>描述</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=laptop%20computer&image_size=square" alt="笔记本电脑" class="table-image"></td>
                        <td>笔记本电脑</td>
                        <td>高性能笔记本电脑，适合办公和游戏</td>
                        <td>¥5999</td>
                        <td><button class="add-to-cart">加入购物车</button></td>
                    </tr>
                    <tr>
                        <td><img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=smartphone&image_size=square" alt="智能手机" class="table-image"></td>
                        <td>智能手机</td>
                        <td>最新款智能手机，拍照效果出色</td>
                        <td>¥3999</td>
                        <td><button class="add-to-cart">加入购物车</button></td>
                    </tr>
                    <tr>
                        <td><img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=tablet%20device&image_size=square" alt="平板电脑" class="table-image"></td>
                        <td>平板电脑</td>
                        <td>轻薄便携，适合娱乐和学习</td>
                        <td>¥2999</td>
                        <td><button class="add-to-cart">加入购物车</button></td>
                    </tr>
                    <tr>
                        <td><img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=smart%20watch&image_size=square" alt="智能手表" class="table-image"></td>
                        <td>智能手表</td>
                        <td>多功能智能手表，健康监测</td>
                        <td>¥1999</td>
                        <td><button class="add-to-cart">加入购物车</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <footer>
        <p>© 2026 商品展示 版权所有</p>
    </footer>
</body>
</html>

18.3 完整登录/注册页面 ​

项目目标 ​

创建一个完整的登录/注册页面，包含表单验证和用户交互。

技术要点 ​

  • 表单标签：form、input、button
  • 文本标签：h1、p
  • 分区标签：div
  • JavaScript表单验证

实现代码 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册页面</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .form-container {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-top: 50px;
        }
        
        .form-header {
            background-color: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .form-header h1 {
            margin: 0;
        }
        
        .form-body {
            padding: 30px;
        }
        
        .form-tabs {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .tab {
            flex: 1;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.3s;
        }
        
        .tab.active {
            border-bottom-color: #3498db;
            color: #3498db;
            font-weight: bold;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #34495e;
        }
        
        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
            font-size: 16px;
        }
        
        input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .error {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
        }
        
        .btn {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 3px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }
        
        .form-footer {
            text-align: center;
            margin-top: 20px;
        }
        
        .form-footer a {
            color: #3498db;
            text-decoration: none;
        }
        
        .form-footer a:hover {
            text-decoration: underline;
        }
        
        .form-content {
            display: none;
        }
        
        .form-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-container">
            <div class="form-header">
                <h1>用户登录/注册</h1>
            </div>
            <div class="form-body">
                <div class="form-tabs">
                    <div class="tab active" data-tab="login">登录</div>
                    <div class="tab" data-tab="register">注册</div>
                </div>
                
                <div class="form-content active" id="login">
                    <form id="login-form">
                        <div class="form-group">
                            <label for="login-email">邮箱</label>
                            <input type="email" id="login-email" name="email" placeholder="请输入邮箱" required>
                            <div class="error" id="login-email-error"></div>
                        </div>
                        
                        <div class="form-group">
                            <label for="login-password">密码</label>
                            <input type="password" id="login-password" name="password" placeholder="请输入密码" required>
                            <div class="error" id="login-password-error"></div>
                        </div>
                        
                        <button type="submit" class="btn">登录</button>
                        
                        <div class="form-footer">
                            <p>还没有账号？<a href="#" id="switch-to-register">立即注册</a></p>
                        </div>
                    </form>
                </div>
                
                <div class="form-content" id="register">
                    <form id="register-form">
                        <div class="form-group">
                            <label for="register-username">用户名</label>
                            <input type="text" id="register-username" name="username" placeholder="请输入用户名" required>
                            <div class="error" id="register-username-error"></div>
                        </div>
                        
                        <div class="form-group">
                            <label for="register-email">邮箱</label>
                            <input type="email" id="register-email" name="email" placeholder="请输入邮箱" required>
                            <div class="error" id="register-email-error"></div>
                        </div>
                        
                        <div class="form-group">
                            <label for="register-password">密码</label>
                            <input type="password" id="register-password" name="password" placeholder="请输入密码" required>
                            <div class="error" id="register-password-error"></div>
                        </div>
                        
                        <div class="form-group">
                            <label for="register-confirm-password">确认密码</label>
                            <input type="password" id="register-confirm-password" name="confirm-password" placeholder="请确认密码" required>
                            <div class="error" id="register-confirm-password-error"></div>
                        </div>
                        
                        <button type="submit" class="btn">注册</button>
                        
                        <div class="form-footer">
                            <p>已有账号？<a href="#" id="switch-to-login">立即登录</a></p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 切换标签
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // 切换标签样式
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 切换表单内容
                document.querySelectorAll('.form-content').forEach(content => content.classList.remove('active'));
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // 切换到注册
        document.getElementById('switch-to-register').addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector('[data-tab="register"]').click();
        });
        
        // 切换到登录
        document.getElementById('switch-to-login').addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector('[data-tab="login"]').click();
        });
        
        // 登录表单验证
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            let isValid = true;
            
            // 验证邮箱
            const email = document.getElementById('login-email').value;
            const emailError = document.getElementById('login-email-error');
            if (!email) {
                emailError.textContent = '邮箱不能为空';
                isValid = false;
            } else if (!/+@+\.+/.test(email)) {
                emailError.textContent = '请输入有效的邮箱地址';
                isValid = false;
            } else {
                emailError.textContent = '';
            }
            
            // 验证密码
            const password = document.getElementById('login-password').value;
            const passwordError = document.getElementById('login-password-error');
            if (!password) {
                passwordError.textContent = '密码不能为空';
                isValid = false;
            } else {
                passwordError.textContent = '';
            }
            
            if (isValid) {
                alert('登录成功！');
            }
        });
        
        // 注册表单验证
        document.getElementById('register-form').addEventListener('submit', function(e) {
            e.preventDefault();
            let isValid = true;
            
            // 验证用户名
            const username = document.getElementById('register-username').value;
            const usernameError = document.getElementById('register-username-error');
            if (!username) {
                usernameError.textContent = '用户名不能为空';
                isValid = false;
            } else {
                usernameError.textContent = '';
            }
            
            // 验证邮箱
            const email = document.getElementById('register-email').value;
            const emailError = document.getElementById('register-email-error');
            if (!email) {
                emailError.textContent = '邮箱不能为空';
                isValid = false;
            } else if (!/+@+\.+/.test(email)) {
                emailError.textContent = '请输入有效的邮箱地址';
                isValid = false;
            } else {
                emailError.textContent = '';
            }
            
            // 验证密码
            const password = document.getElementById('register-password').value;
            const passwordError = document.getElementById('register-password-error');
            if (!password) {
                passwordError.textContent = '密码不能为空';
                isValid = false;
            } else if (password.length < 6) {
                passwordError.textContent = '密码长度不能少于6位';
                isValid = false;
            } else {
                passwordError.textContent = '';
            }
            
            // 验证确认密码
            const confirmPassword = document.getElementById('register-confirm-password').value;
            const confirmPasswordError = document.getElementById('register-confirm-password-error');
            if (!confirmPassword) {
                confirmPasswordError.textContent = '请确认密码';
                isValid = false;
            } else if (confirmPassword !== password) {
                confirmPasswordError.textContent = '两次输入的密码不一致';
                isValid = false;
            } else {
                confirmPasswordError.textContent = '';
            }
            
            if (isValid) {
                alert('注册成功！');
            }
        });
    </script>
</body>
</html>

18.4 响应式新闻页面 ​

项目目标 ​

创建一个响应式新闻页面，适配不同设备屏幕。

技术要点 ​

  • 语义化标签：header、nav、main、article、section、footer
  • 响应式设计：媒体查询
  • 图片标签：img
  • 链接标签：a

实现代码 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式新闻页面</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        header {
            background-color: #333;
            color: white;
            padding: 20px;
        }
        
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 24px;
        }
        
        nav ul {
            list-style: none;
            display: flex;
        }
        
        nav li {
            margin-left: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        nav a:hover {
            color: #3498db;
        }
        
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 20px;
        }
        
        .content {
            flex: 3;
        }
        
        .sidebar {
            flex: 1;
        }
        
        .news-article {
            background-color: white;
            padding: 30px;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .news-article h2 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .news-meta {
            color: #7f8c8d;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .news-image {
            max-width: 100%;
            height: auto;
            margin: 20px 0;
            border-radius: 5px;
        }
        
        .news-excerpt {
            margin-bottom: 20px;
        }
        
        .read-more {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 8px 15px;
            border-radius: 3px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        
        .read-more:hover {
            background-color: #2980b9;
        }
        
        .sidebar-section {
            background-color: white;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .sidebar-section h3 {
            color: #34495e;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .sidebar-section ul {
            list-style: none;
        }
        
        .sidebar-section li {
            margin-bottom: 10px;
        }
        
        .sidebar-section a {
            color: #3498db;
            text-decoration: none;
        }
        
        .sidebar-section a:hover {
            text-decoration: underline;
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 30px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }
            
            nav ul {
                display: none;
                position: absolute;
                top: 70px;
                left: 0;
                width: 100%;
                background-color: #333;
                padding: 20px;
                flex-direction: column;
                gap: 10px;
            }
            
            nav ul.active {
                display: flex;
            }
            
            nav li {
                margin: 0;
            }
            
            main {
                flex-direction: column;
            }
            
            .header-container {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-container">
            <div class="logo">新闻网站</div>
            <div class="menu-toggle">☰</div>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">国内</a></li>
                    <li><a href="#">国际</a></li>
                    <li><a href="#">科技</a></li>
                    <li><a href="#">娱乐</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main>
        <div class="content">
            <article class="news-article">
                <h2>最新科技突破：人工智能技术取得重大进展</h2>
                <div class="news-meta">
                    <span>发布时间：2026-01-01</span> | 
                    <span>来源：科技日报</span>
                </div>
                <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=artificial%20intelligence%20technology&image_size=landscape_16_9" alt="人工智能技术" class="news-image">
                <p class="news-excerpt">近日，科学家们在人工智能领域取得了重大突破，开发出了更加智能、高效的AI系统。这一技术将为各个行业带来革命性的变化，包括医疗、教育、金融等领域。</p>
                <a href="#" class="read-more">阅读更多</a>
            </article>
            
            <article class="news-article">
                <h2>全球气候变化会议在巴黎召开，各国承诺减排</h2>
                <div class="news-meta">
                    <span>发布时间：2025-12-30</span> | 
                    <span>来源：环球时报</span>
                </div>
                <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=climate%20change%20conference&image_size=landscape_16_9" alt="气候变化会议" class="news-image">
                <p class="news-excerpt">第28届联合国气候变化大会在巴黎召开，各国代表共同讨论全球气候变化问题，并承诺采取更加积极的减排措施，以应对日益严重的气候危机。</p>
                <a href="#" class="read-more">阅读更多</a>
            </article>
        </div>
        
        <div class="sidebar">
            <div class="sidebar-section">
                <h3>热门新闻</h3>
                <ul>
                    <li><a href="#">最新科技突破：人工智能技术取得重大进展</a></li>
                    <li><a href="#">全球气候变化会议在巴黎召开，各国承诺减排</a></li>
                    <li><a href="#">国内经济稳步增长，GDP增速达到5.2%</a></li>
                    <li><a href="#">世界杯：阿根廷队成功卫冕冠军</a></li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h3>新闻分类</h3>
                <ul>
                    <li><a href="#">国内新闻</a></li>
                    <li><a href="#">国际新闻</a></li>
                    <li><a href="#">科技新闻</a></li>
                    <li><a href="#">娱乐新闻</a></li>
                    <li><a href="#">体育新闻</a></li>
                </ul>
            </div>
        </div>
    </main>
    
    <footer>
        <p>© 2026 新闻网站 版权所有</p>
    </footer>
    
    <script>
        // 移动端菜单切换
        document.querySelector('.menu-toggle').addEventListener('click', function() {
            document.querySelector('nav ul').classList.toggle('active');
        });
    </script>
</body>
</html>

18.5 个人作品集页面 ​

项目目标 ​

创建一个个人作品集页面，展示个人项目和作品。

技术要点 ​

  • 语义化标签：header、nav、main、section、footer
  • 图片标签：img
  • 链接标签：a
  • 分区标签：div

实现代码 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        header h1 {
            margin-bottom: 10px;
        }
        
        header p {
            font-size: 18px;
            opacity: 0.8;
        }
        
        nav {
            background-color: #2c3e50;
            padding: 10px 0;
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
        }
        
        nav li {
            margin: 0 15px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        
        nav a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        section {
            margin-bottom: 40px;
        }
        
        h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }
        
        .project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .project-card {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s;
        }
        
        .project-card:hover {
            transform: translateY(-5px);
        }
        
        .project-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .project-info {
            padding: 20px;
        }
        
        .project-title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #34495e;
        }
        
        .project-description {
            color: #7f8c8d;
            margin-bottom: 15px;
            font-size: 14px;
        }
        
        .project-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 15px;
        }
        
        .tech-tag {
            background-color: #f9f9f9;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 12px;
            color: #3498db;
        }
        
        .project-link {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 8px 15px;
            border-radius: 3px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        
        .project-link:hover {
            background-color: #2980b9;
        }
        
        .about {
            background-color: white;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .about p {
            margin-bottom: 15px;
        }
        
        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        
        .skill-item {
            background-color: #f9f9f9;
            padding: 10px 15px;
            border-radius: 3px;
            font-size: 14px;
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
        }
        
        @media (max-width: 768px) {
            nav ul {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            nav li {
                margin: 0;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>张三的作品集</h1>
        <p>前端开发工程师 | 热爱编程与设计</p>
    </header>
    
    <nav>
        <div class="nav-container">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">项目</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </div>
    </nav>
    
    <main>
        <section>
            <h2>我的项目</h2>
            <div class="project-grid">
                <div class="project-card">
                    <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=website%20design&image_size=square" alt="个人博客" class="project-image">
                    <div class="project-info">
                        <h3 class="project-title">个人博客网站</h3>
                        <p class="project-description">使用HTML、CSS和JavaScript开发的个人博客网站，支持文章发布和评论功能。</p>
                        <div class="project-tech">
                            <span class="tech-tag">HTML5</span>
                            <span class="tech-tag">CSS3</span>
                            <span class="tech-tag">JavaScript</span>
                        </div>
                        <a href="#" class="project-link">查看详情</a>
                    </div>
                </div>
                
                <div class="project-card">
                    <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=ecommerce%20website&image_size=square" alt="电商网站" class="project-image">
                    <div class="project-info">
                        <h3 class="project-title">电商网站</h3>
                        <p class="project-description">使用React和Node.js开发的电商网站，支持商品展示、购物车和支付功能。</p>
                        <div class="project-tech">
                            <span class="tech-tag">React</span>
                            <span class="tech-tag">Node.js</span>
                            <span class="tech-tag">MongoDB</span>
                        </div>
                        <a href="#" class="project-link">查看详情</a>
                    </div>
                </div>
                
                <div class="project-card">
                    <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=mobile%20app%20design&image_size=square" alt="移动应用" class="project-image">
                    <div class="project-info">
                        <h3 class="project-title">移动应用UI设计</h3>
                        <p class="project-description">为健康管理应用设计的UI界面，注重用户体验和视觉效果。</p>
                        <div class="project-tech">
                            <span class="tech-tag">Figma</span>
                            <span class="tech-tag">UI设计</span>
                            <span class="tech-tag">用户体验</span>
                        </div>
                        <a href="#" class="project-link">查看详情</a>
                    </div>
                </div>
            </div>
        </section>
        
        <section>
            <h2>关于我</h2>
            <div class="about">
                <p>我是一名前端开发工程师，拥有3年的前端开发经验。我热爱编程和设计，致力于创建美观、实用的网页和应用。</p>
                <p>我的技术栈包括HTML5、CSS3、JavaScript、React、Vue等前端技术，以及Node.js等后端技术。</p>
                <p>我注重代码质量和用户体验，善于解决问题和团队协作。</p>
                <div class="skills">
                    <span class="skill-item">HTML5</span>
                    <span class="skill-item">CSS3</span>
                    <span class="skill-item">JavaScript</span>
                    <span class="skill-item">React</span>
                    <span class="skill-item">Vue</span>
                    <span class="skill-item">Node.js</span>
                    <span class="skill-item">Git</span>
                    <span class="skill-item">UI设计</span>
                </div>
            </div>
        </section>
    </main>
    
    <footer>
        <p>© 2026 张三的作品集 版权所有</p>
    </footer>
</body>
</html>

小结 ​

通过本章节的学习，你已经完成了几个综合实战项目的开发，包括个人博客首页、商品展示页面、完整登录/注册页面、响应式新闻页面和个人作品集页面。这些项目涵盖了HTML的高级应用，通过实战练习，你可以巩固所学的HTML知识，提升实战能力，为将来的前端开发工作打下坚实的基础。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建