编程马·菜鸟教程

Appearance

27. 综合实战项目（完整功能，适配网站需求） ​

27.1 个人博客首页（运用Flex/Grid布局、响应式、动画效果） ​

功能说明 ​

创建一个美观的个人博客首页，包含导航栏、banner、文章列表和页脚。

实现代码 ​

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>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
        }

        /* 导航栏 */
        .navbar {
            background-color: #333;
            color: white;
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .navbar-links {
            display: flex;
            gap: 1.5rem;
        }

        .navbar-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .navbar-links a:hover {
            color: #3498db;
        }

        /* Banner */
        .banner {
            background: linear-gradient(135deg, #3498db, #2ecc71);
            color: white;
            padding: 4rem 2rem;
            text-align: center;
            animation: fadeIn 1s ease-in-out;
        }

        .banner h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .banner p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background-color: white;
            color: #3498db;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background-color: #333;
            color: white;
            transform: translateY(-2px);
        }

        /* 文章列表 */
        .articles {
            padding: 3rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .articles h2 {
            text-align: center;
            margin-bottom: 2rem;
            font-size: 2rem;
        }

        .article-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .article-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }

        .article-image {
            width: 100%;
            height: 200px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
        }

        .article-content {
            padding: 1.5rem;
        }

        .article-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .article-excerpt {
            color: #666;
            margin-bottom: 1rem;
        }

        .article-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: #999;
        }

        /* 页脚 */
        .footer {
            background-color: #333;
            color: white;
            padding: 2rem;
            text-align: center;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .navbar-container {
                flex-direction: column;
                gap: 1rem;
            }

            .navbar-links {
                flex-wrap: wrap;
                justify-content: center;
            }

            .banner h1 {
                font-size: 2rem;
            }

            .article-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <div class="navbar-brand">My Blog</div>
            <div class="navbar-links">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">关于</a>
                <a href="#">联系</a>
            </div>
        </div>
    </nav>

    <!-- Banner -->
    <section class="banner">
        <h1>欢迎来到我的个人博客</h1>
        <p>分享技术心得，记录生活点滴</p>
        <a href="#" class="btn">阅读更多</a>
    </section>

    <!-- 文章列表 -->
    <section class="articles">
        <h2>最新文章</h2>
        <div class="article-grid">
            <div class="article-card">
                <div class="article-image">📝</div>
                <div class="article-content">
                    <h3 class="article-title">CSS Grid布局完全指南</h3>
                    <p class="article-excerpt">详细介绍CSS Grid布局的使用方法和最佳实践，帮助你快速掌握现代布局技术。</p>
                    <div class="article-meta">
                        <span>2024-01-01</span>
                        <span>前端开发</span>
                    </div>
                </div>
            </div>
            <div class="article-card">
                <div class="article-image">💻</div>
                <div class="article-content">
                    <h3 class="article-title">JavaScript异步编程详解</h3>
                    <p class="article-excerpt">深入理解JavaScript异步编程原理，掌握Promise和async/await的使用技巧。</p>
                    <div class="article-meta">
                        <span>2024-01-02</span>
                        <span>前端开发</span>
                    </div>
                </div>
            </div>
            <div class="article-card">
                <div class="article-image">🎨</div>
                <div class="article-content">
                    <h3 class="article-title">现代CSS动画技巧</h3>
                    <p class="article-excerpt">学习如何使用CSS animations和transitions创建流畅的动画效果，提升用户体验。</p>
                    <div class="article-meta">
                        <span>2024-01-03</span>
                        <span>前端开发</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2024 My Blog. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

核心知识点 ​

  • Flex布局：使用display: flex实现导航栏的布局
  • Grid布局：使用grid-template-columns实现文章卡片的响应式布局
  • 渐变：使用linear-gradient创建banner的背景效果
  • 动画：使用@keyframes定义淡入动画
  • 过渡：使用transition实现悬停效果
  • 响应式设计：使用媒体查询适配不同屏幕尺寸

27.2 商品展示页面（运用卡片布局、响应式、字体图标） ​

功能说明 ​

创建一个商品展示页面，包含商品卡片、分类导航和筛选功能。

实现代码 ​

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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

        /* 导航栏 */
        .navbar {
            background-color: white;
            padding: 1rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #3498db;
        }

        .search-bar {
            display: flex;
            flex: 1;
            max-width: 500px;
            margin: 0 2rem;
        }

        .search-input {
            flex: 1;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }

        .search-btn {
            padding: 0.5rem 1rem;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        .cart {
            position: relative;
            font-size: 1.5rem;
            color: #333;
        }

        .cart-count {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 分类导航 */
        .category-nav {
            background-color: white;
            padding: 1rem;
            margin-bottom: 2rem;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .category-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
        }

        .category-item {
            padding: 0.5rem 1rem;
            border: 1px solid #ddd;
            border-radius: 20px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.3s ease;
        }

        .category-item:hover {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
        }

        .category-item.active {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
        }

        /* 商品展示 */
        .products {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .products-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .products-title {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .sort-select {
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }

        .product-image {
            width: 100%;
            height: 200px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
        }

        .product-content {
            padding: 1rem;
        }

        .product-title {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            height: 40px;
            overflow: hidden;
        }

        .product-price {
            font-size: 1.2rem;
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 0.5rem;
        }

        .product-rating {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .rating-stars {
            color: #f39c12;
            margin-right: 0.5rem;
        }

        .rating-count {
            font-size: 0.8rem;
            color: #666;
        }

        .add-to-cart {
            width: 100%;
            padding: 0.5rem;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .add-to-cart:hover {
            background-color: #2980b9;
        }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .navbar-container {
                flex-direction: column;
                gap: 1rem;
            }

            .search-bar {
                width: 100%;
                max-width: none;
                margin: 0;
            }

            .products-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .product-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <div class="logo">ShopNow</div>
            <div class="search-bar">
                <input type="text" class="search-input" placeholder="搜索商品...">
                <button class="search-btn"><i class="fas fa-search"></i></button>
            </div>
            <div class="cart">
                <i class="fas fa-shopping-cart"></i>
                <span class="cart-count">3</span>
            </div>
        </div>
    </nav>

    <!-- 分类导航 -->
    <div class="category-nav">
        <div class="category-container">
            <div class="category-item active">全部</div>
            <div class="category-item">电子产品</div>
            <div class="category-item">服装</div>
            <div class="category-item">家居</div>
            <div class="category-item">食品</div>
            <div class="category-item">运动</div>
            <div class="category-item">图书</div>
        </div>
    </div>

    <!-- 商品展示 -->
    <section class="products">
        <div class="products-header">
            <h2 class="products-title">热门商品</h2>
            <select class="sort-select">
                <option>综合排序</option>
                <option>价格从低到高</option>
                <option>价格从高到低</option>
                <option>销量优先</option>
            </select>
        </div>
        <div class="product-grid">
            <div class="product-card">
                <div class="product-image">📱</div>
                <div class="product-content">
                    <h3 class="product-title">智能手机 128GB</h3>
                    <div class="product-price">¥3999</div>
                    <div class="product-rating">
                        <div class="rating-stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                        <span class="rating-count">128</span>
                    </div>
                    <button class="add-to-cart">加入购物车</button>
                </div>
            </div>
            <div class="product-card">
                <div class="product-image">💻</div>
                <div class="product-content">
                    <h3 class="product-title">笔记本电脑 8GB+256GB</h3>
                    <div class="product-price">¥5999</div>
                    <div class="product-rating">
                        <div class="rating-stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <span class="rating-count">89</span>
                    </div>
                    <button class="add-to-cart">加入购物车</button>
                </div>
            </div>
            <div class="product-card">
                <div class="product-image">🎧</div>
                <div class="product-content">
                    <h3 class="product-title">无线蓝牙耳机</h3>
                    <div class="product-price">¥599</div>
                    <div class="product-rating">
                        <div class="rating-stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                        <span class="rating-count">234</span>
                    </div>
                    <button class="add-to-cart">加入购物车</button>
                </div>
            </div>
            <div class="product-card">
                <div class="product-image">⌚</div>
                <div class="product-content">
                    <h3 class="product-title">智能手表</h3>
                    <div class="product-price">¥1299</div>
                    <div class="product-rating">
                        <div class="rating-stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                        <span class="rating-count">156</span>
                    </div>
                    <button class="add-to-cart">加入购物车</button>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

核心知识点 ​

  • Grid布局：使用grid-template-columns实现商品卡片的响应式布局
  • Flex布局：使用display: flex实现导航栏和商品信息的布局
  • 字体图标：使用Font Awesome图标增强视觉效果
  • 过渡：使用transition实现卡片悬停效果
  • 响应式设计：使用媒体查询适配不同屏幕尺寸

27.3 登录/注册页面（运用表单美化、居中对齐、渐变背景） ​

功能说明 ​

创建一个美观的登录/注册页面，包含表单验证和渐变背景。

实现代码 ​

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>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #3498db, #2ecc71);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        /* 容器 */
        .container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            width: 100%;
            max-width: 800px;
            display: flex;
            flex-direction: column;
        }

        /* 标签切换 */
        .tabs {
            display: flex;
            background-color: #f5f5f5;
        }

        .tab {
            flex: 1;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-weight: bold;
        }

        .tab.active {
            background-color: white;
            color: #3498db;
        }

        /* 表单容器 */
        .form-container {
            padding: 2rem;
        }

        /* 表单 */
        .form {
            display: none;
        }

        .form.active {
            display: block;
        }

        /* 表单组 */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
            color: #333;
        }

        .form-group input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

        /* 复选框 */
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .checkbox-group input {
            width: auto;
        }

        /* 按钮 */
        .btn {
            width: 100%;
            padding: 0.8rem;
            background: linear-gradient(135deg, #3498db, #2ecc71);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        /* 链接 */
        .form-links {
            margin-top: 1.5rem;
            text-align: center;
            font-size: 0.9rem;
        }

        .form-links a {
            color: #3498db;
            text-decoration: none;
        }

        .form-links a:hover {
            text-decoration: underline;
        }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .container {
                margin: 1rem;
            }

            .form-container {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 标签切换 -->
        <div class="tabs">
            <div class="tab active" data-tab="login">登录</div>
            <div class="tab" data-tab="register">注册</div>
        </div>

        <!-- 登录表单 -->
        <div class="form-container">
            <form class="form active" id="login">
                <h2 style="margin-bottom: 2rem; text-align: center;">用户登录</h2>
                <div class="form-group">
                    <label for="login-username">用户名</label>
                    <input type="text" id="login-username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="login-password">密码</label>
                    <input type="password" id="login-password" placeholder="请输入密码">
                </div>
                <div class="form-group checkbox-group">
                    <input type="checkbox" id="remember">
                    <label for="remember">记住我</label>
                </div>
                <button type="submit" class="btn">登录</button>
                <div class="form-links">
                    <a href="#">忘记密码？</a>
                </div>
            </form>

            <!-- 注册表单 -->
            <form class="form" id="register">
                <h2 style="margin-bottom: 2rem; text-align: center;">用户注册</h2>
                <div class="form-group">
                    <label for="register-username">用户名</label>
                    <input type="text" id="register-username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="register-email">邮箱</label>
                    <input type="email" id="register-email" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="register-password">密码</label>
                    <input type="password" id="register-password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="register-confirm-password">确认密码</label>
                    <input type="password" id="register-confirm-password" placeholder="请确认密码">
                </div>
                <button type="submit" class="btn">注册</button>
                <div class="form-links">
                    已有账号？<a href="#">立即登录</a>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 标签切换功能
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有标签的active类
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                // 添加当前标签的active类
                tab.classList.add('active');
                
                // 隐藏所有表单
                document.querySelectorAll('.form').forEach(form => form.classList.remove('active'));
                // 显示对应表单
                const tabId = tab.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });
    </script>
</body>
</html>

核心知识点 ​

  • 渐变背景：使用linear-gradient创建页面背景效果
  • Flex布局：使用display: flex实现页面居中对齐
  • 表单美化：自定义输入框和按钮的样式
  • 标签切换：使用JavaScript实现登录/注册表单的切换
  • 过渡：使用transition实现按钮悬停效果
  • 响应式设计：使用媒体查询适配不同屏幕尺寸

27.4 响应式导航栏（适配手机/桌面，运用媒体查询、Flex布局） ​

功能说明 ​

创建一个响应式导航栏，在桌面端显示水平菜单，在移动端显示汉堡菜单。

实现代码 ​

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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
        }

        /* 导航栏 */
        .navbar {
            background-color: #333;
            color: white;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: bold;
        }

        /* 桌面端导航链接 */
        .navbar-links {
            display: flex;
            gap: 1.5rem;
        }

        .navbar-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .navbar-links a:hover {
            color: #3498db;
        }

        /* 移动端菜单按钮 */
        .menu-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* 移动端导航菜单 */
        .mobile-menu {
            display: none;
            background-color: #333;
            padding: 1rem;
            border-top: 1px solid #555;
        }

        .mobile-menu.active {
            display: block;
        }

        .mobile-menu a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 0.5rem 0;
            transition: color 0.3s ease;
        }

        .mobile-menu a:hover {
            color: #3498db;
        }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .navbar-links {
                display: none;
            }

            .menu-toggle {
                display: block;
            }
        }

        /* 内容区域 */
        .content {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .content h1 {
            margin-bottom: 1rem;
        }

        .content p {
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <div class="navbar-brand">MyWebsite</div>
            <div class="navbar-links">
                <a href="#">首页</a>
                <a href="#">关于</a>
                <a href="#">服务</a>
                <a href="#">联系</a>
            </div>
            <div class="menu-toggle" id="menuToggle">
                <i class="fas fa-bars"></i>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div class="mobile-menu" id="mobileMenu">
            <a href="#">首页</a>
            <a href="#">关于</a>
            <a href="#">服务</a>
            <a href="#">联系</a>
        </div>
    </nav>

    <!-- 内容区域 -->
    <div class="content">
        <h1>响应式导航栏示例</h1>
        <p>这是一个响应式导航栏的示例，在桌面端显示水平菜单，在移动端显示汉堡菜单。</p>
        <p>请调整浏览器窗口大小，查看导航栏的变化。</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <script>
        // 移动端菜单切换
        document.getElementById('menuToggle').addEventListener('click', function() {
            document.getElementById('mobileMenu').classList.toggle('active');
        });
    </script>
</body>
</html>

核心知识点 ​

  • Flex布局：使用display: flex实现导航栏的布局
  • 媒体查询：使用@media screen实现响应式设计
  • JavaScript：使用JavaScript实现移动端菜单的切换
  • 过渡：使用transition实现链接悬停效果
  • 字体图标：使用Font Awesome图标作为汉堡菜单按钮

27.5 简单作品集页面（运用Grid布局、动画、滤镜效果） ​

功能说明 ​

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

实现代码 ​

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>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

        /* 头部 */
        .header {
            background: linear-gradient(135deg, #3498db, #2ecc71);
            color: white;
            padding: 4rem 2rem;
            text-align: center;
            animation: fadeIn 1s ease-in-out;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .header p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

        /* 作品集 */
        .portfolio {
            max-width: 1200px;
            margin: 3rem auto;
            padding: 0 1rem;
        }

        .portfolio h2 {
            text-align: center;
            margin-bottom: 2rem;
            font-size: 2rem;
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .portfolio-item {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .portfolio-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }

        .portfolio-image {
            width: 100%;
            height: 200px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            transition: filter 0.3s ease;
        }

        .portfolio-item:hover .portfolio-image {
            filter: grayscale(100%);
        }

        .portfolio-content {
            padding: 1.5rem;
        }

        .portfolio-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .portfolio-description {
            color: #666;
            margin-bottom: 1rem;
        }

        .portfolio-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .portfolio-tag {
            padding: 0.25rem 0.75rem;
            background-color: #f0f0f0;
            border-radius: 20px;
            font-size: 0.8rem;
            color: #666;
        }

        /* 页脚 */
        .footer {
            background-color: #333;
            color: white;
            padding: 2rem;
            text-align: center;
            margin-top: 3rem;
        }

        /* 动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }

            .portfolio-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <h1>我的作品集</h1>
        <p>展示我的创意项目和设计作品</p>
    </header>

    <!-- 作品集 -->
    <section class="portfolio">
        <h2>精选作品</h2>
        <div class="portfolio-grid">
            <div class="portfolio-item">
                <div class="portfolio-image">🎨</div>
                <div class="portfolio-content">
                    <h3 class="portfolio-title">网站设计</h3>
                    <p class="portfolio-description">为客户设计的现代响应式网站，包含动画效果和交互功能。</p>
                    <div class="portfolio-tags">
                        <span class="portfolio-tag">HTML</span>
                        <span class="portfolio-tag">CSS</span>
                        <span class="portfolio-tag">JavaScript</span>
                    </div>
                </div>
            </div>
            <div class="portfolio-item">
                <div class="portfolio-image">📱</div>
                <div class="portfolio-content">
                    <h3 class="portfolio-title">移动应用界面</h3>
                    <p class="portfolio-description">设计的移动应用界面，注重用户体验和视觉美感。</p>
                    <div class="portfolio-tags">
                        <span class="portfolio-tag">UI设计</span>
                        <span class="portfolio-tag">Figma</span>
                        <span class="portfolio-tag">移动应用</span>
                    </div>
                </div>
            </div>
            <div class="portfolio-item">
                <div class="portfolio-image">🖼️</div>
                <div class="portfolio-content">
                    <h3 class="portfolio-title">品牌标识设计</h3>
                    <p class="portfolio-description">为初创公司设计的品牌标识和视觉识别系统。</p>
                    <div class="portfolio-tags">
                        <span class="portfolio-tag">标志设计</span>
                        <span class="portfolio-tag">品牌设计</span>
                        <span class="portfolio-tag">Illustrator</span>
                    </div>
                </div>
            </div>
            <div class="portfolio-item">
                <div class="portfolio-image">💻</div>
                <div class="portfolio-content">
                    <h3 class="portfolio-title">电商网站</h3>
                    <p class="portfolio-description">功能完整的电商网站，包含商品展示、购物车和支付功能。</p>
                    <div class="portfolio-tags">
                        <span class="portfolio-tag">前端开发</span>
                        <span class="portfolio-tag">电商</span>
                        <span class="portfolio-tag">响应式</span>
                    </div>
                </div>
            </div>
            <div class="portfolio-item">
                <div class="portfolio-image">📊</div>
                <div class="portfolio-content">
                    <h3 class="portfolio-title">数据可视化</h3>
                    <p class="portfolio-description">交互式数据可视化项目，展示复杂数据的趋势和模式。</p>
                    <div class="portfolio-tags">
                        <span class="portfolio-tag">数据可视化</span>
                        <span class="portfolio-tag">D3.js</span>
                        <span class="portfolio-tag">JavaScript</span>
                    </div>
                </div>
            </div>
            <div class="portfolio-item">
                <div class="portfolio-image">🎯</div>
                <div class="portfolio-content">
                    <h3 class="portfolio-title">营销 landing page</h3>
                    <p class="portfolio-description">为产品推广设计的营销页面，注重转化率和用户体验。</p>
                    <div class="portfolio-tags">
                        <span class="portfolio-tag">Landing Page</span>
                        <span class="portfolio-tag">营销</span>
                        <span class="portfolio-tag">CSS动画</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <p>&copy; 2024 我的作品集. All rights reserved.</p>
    </footer>
</body>
</html>

核心知识点 ​

  • Grid布局：使用grid-template-columns实现作品卡片的响应式布局
  • 渐变：使用linear-gradient创建头部背景效果
  • 动画：使用@keyframes定义淡入动画
  • 滤镜：使用filter: grayscale实现图片灰度效果
  • 过渡：使用transition实现卡片悬停效果
  • 响应式设计：使用媒体查询适配不同屏幕尺寸

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

基于 VitePress 构建