我可以为您提供一套完整、系统化、可扩展的解决方案，这套方案包括：

164个div css精美网页模板
（图片来源网络，侵删）
  1. 核心思路与架构：如何高效地管理和创建如此多的模板。
  2. 精选的10个精美模板示例：每个都包含完整的HTML和CSS代码，风格各异，可以直接使用或作为灵感来源。
  3. 模板扩展方法：如何基于这10个模板，通过修改内容、颜色和布局，轻松扩展到164个甚至更多。
  4. 资源推荐：获取更多模板的优质网站。

核心思路：模块化与原子化设计

与其创建164个完全不同的“庞然大物”，不如采用“原子化设计”的思想，我们将网页拆解成可复用的组件。

  1. 基础组件：

    按钮、输入框、导航栏、页脚、卡片、徽章等。

  2. 布局组件：

    两栏布局、三栏布局、网格布局、弹性布局等。

  3. 页面模板：

    将基础组件和布局组件组合成完整的页面,如：首页、关于我们、博客列表、产品详情、联系表单等。

    164个div css精美网页模板
    （图片来源网络，侵删）

通过这种方式,您可以像搭积木一样，快速组合出成百上千种不同的页面变体，下面的10个示例模板就是基于这个思路构建的。

精选10个精美网页模板示例 (附完整代码)

每个模板都力求精美、实用，并附有详细的注释。

模板1：极简企业博客首页

  • 特点：干净、现代、注重内容，适合个人博客或内容型网站。
  • 技术栈：Flexbox, CSS Grid, 自定义字体。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">极简博客 - 模板1</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        /* --- 全局样式重置与变量 --- */
        :root {
            --primary-color: #333;
            --secondary-color: #666;
            --accent-color: #007bff;
            --bg-color: #f9f9f9;
            --card-bg-color: #ffffff;
            --font-family: 'Noto Sans SC', sans-serif;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: var(--font-family);
            line-height: 1.6;
            color: var(--primary-color);
            background-color: var(--bg-color);
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        /* --- 头部导航 --- */
        header {
            background-color: var(--card-bg-color);
            padding: 1.5rem 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
        }
        nav ul {
            list-style: none;
            display: flex;
            gap: 2rem;
        }
        nav a {
            text-decoration: none;
            color: var(--secondary-color);
            font-weight: 500;
            transition: color 0.3s ease;
        }
        nav a:hover {
            color: var(--accent-color);
        }
        /* --- 主要内容区 --- */
        main {
            padding: 3rem 0;
        }
        .hero {
            text-align: center;
            margin-bottom: 4rem;
        }
        .hero h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        .hero p {
            font-size: 1.2rem;
            color: var(--secondary-color);
            max-width: 600px;
            margin: 0 auto;
        }
        /* --- 博客文章网格 --- */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
        }
        .blog-card {
            background-color: var(--card-bg-color);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }
        .blog-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .blog-card-content {
            padding: 1.5rem;
        }
        .blog-card-content h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }
        .blog-card-content p {
            color: var(--secondary-color);
            margin-bottom: 1rem;
            font-size: 0.95rem;
        }
        .blog-meta {
            font-size: 0.85rem;
            color: #999;
        }
        /* --- 页脚 --- */
        footer {
            background-color: var(--primary-color);
            color: #fff;
            text-align: center;
            padding: 2rem 0;
            margin-top: 4rem;
        }
        /* --- 响应式设计 --- */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }
            nav ul {
                gap: 1rem;
            }
            .hero h1 {
                font-size: 2rem;
            }
            .blog-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-content">
            <a href="#" class="logo">极简博客</a>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">文章</a></li>
                    <li><a href="#">lt;/a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <div class="container">
            <section class="hero">
                <h1>探索设计与技术的边界</h1>
                <p>分享关于前端开发、UI/UX设计以及创意思考的深度文章。</p>
            </section>
            <section class="blog-grid">
                <article class="blog-card">
                    <img src="https://via.placeholder.com/400x200/007bff/ffffff?text=文章配图1" alt="文章配图">
                    <div class="blog-card-content">
                        <h3>深入理解CSS Grid布局</h3>
                        <p>CSS Grid是网页布局的一次革命，它提供了强大的二维布局系统，本文将带你从零开始...</p>
                        <div class="blog-meta">作者：张三 | 2025年10月27日</div>
                    </div>
                </article>
                <article class="blog-card">
                    <img src="https://via.placeholder.com/400x200/28a745/ffffff?text=文章配图2" alt="文章配图">
                    <div class="blog-card-content">
                        <h3>打造流畅的微交互动画</h3>
                        <p>细节决定成败，微小的动画效果能极大地提升用户体验，学习如何使用CSS Transition...</p>
                        <div class="blog-meta">作者：李四 | 2025年10月25日</div>
                    </div>
                </article>
                <article class="blog-card">
                    <img src="https://via.placeholder.com/400x200/dc3545/ffffff?text=文章配图3" alt="文章配图">
                    <div class="blog-card-content">
                        <h3>2025年前端开发趋势展望</h3>
                        <p>随着WebAssembly、AI辅助编程等新技术的兴起，前端开发的未来将走向何方？...</p>
                        <div class="blog-meta">作者：王五 | 2025年10月20日</div>
                    </div>
                </article>
            </section>
        </div>
    </main>
    <footer>
        <div class="container">
            <p>&copy; 2025 极简博客. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

模板2：创意作品集/摄影师网站

  • 特点：全屏大图、沉浸式体验、滚动展示，适合视觉艺术家、摄影师或设计师。
  • 技术栈：background-attachment: fixed (视差滚动效果)、object-fit。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">创意作品集 - 模板2</title>
    <style>
        /* --- 全局样式 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: #fff;
            overflow-x: hidden;
        }
        /* --- 导航栏 --- */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1.5rem 5%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            z-index: 1000;
            transition: background 0.3s ease;
        }
        .navbar.scrolled {
            background: rgba(0, 0, 0, 0.8);
        }
        .navbar .logo {
            font-size: 1.5rem;
            font-weight: bold;
            text-decoration: none;
            color: #fff;
        }
        /* --- 全屏区块 --- */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://via.placeholder.com/1920x1080/333333/ffffff?text=Hero+Image') no-repeat center center/cover;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #fff;
        }
        .hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            animation: fadeInUp 1s ease;
        }
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            animation: fadeInUp 1s ease 0.2s;
            animation-fill-mode: both;
        }
        .cta-button {
            padding: 1rem 2rem;
            background-color: #ff6b6b;
            color: #fff;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: transform 0.3s ease, background-color 0.3s ease;
            animation: fadeInUp 1s ease 0.4s;
            animation-fill-mode: both;
        }
        .cta-button:hover {
            transform: scale(1.05);
            background-color: #ff5252;
        }
        /* --- 作品展示区 --- */
        .portfolio {
            padding: 5rem 5%;
            background-color: #222;
        }
        .section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 3rem;
        }
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }
        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            cursor: pointer;
        }
        .portfolio-item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .portfolio-item:hover img {
            transform: scale(1.1);
        }
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        .portfolio-overlay h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }
        /* --- 动画 --- */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        /* --- 响应式 --- */
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .section-title { font-size: 2rem; }
            .portfolio-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <a href="#" class="logo">我的作品集</a>
    </nav>
    <section class="hero">
        <h1>捕捉瞬间，创造永恒</h1>
        <p>我是张明，一名专注于人像与风光的摄影师</p>
        <a href="#portfolio" class="cta-button">查看作品</a>
    </section>
    <section class="portfolio" id="portfolio">
        <h2 class="section-title">精选作品</h2>
        <div class="portfolio-grid">
            <div class="portfolio-item">
                <img src="https://via.placeholder.com/400x300/ff6b6b/ffffff?text=作品1" alt="作品1">
                <div class="portfolio-overlay">
                    <h3>城市夜景</h3>
                    <p>上海 · 2025</p>
                </div>
            </div>
            <div class="portfolio-item">
                <img src="https://via.placeholder.com/400x300/4ecdc4/ffffff?text=作品2" alt="作品2">
                <div class="portfolio-overlay">
                    <h3>自然风光</h3>
                    <p>西藏 · 2025</p>
                </div>
            </div>
            <div class="portfolio-item">
                <img src="https://via.placeholder.com/400x300/ffe66d/333333?text=作品3" alt="作品3">
                <div class="portfolio-overlay">
                    <h3>人像摄影</h3>
                    <p>北京 · 2025</p>
                </div>
            </div>
        </div>
    </section>
    <script>
        // 简单的滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
    </script>
</body>
</html>

模板3：科技产品SaaS应用首页

  • 特点：现代、专业、功能突出，使用渐变和动效，适合软件或互联网产品。
  • 技术栈：渐变色、clip-path、CSS动画。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CloudFlow - SaaS产品首页</title>
    <style>
        /* --- 全局样式 --- */
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --text-dark: #1a202c;
            --text-light: #718096;
            --bg-light: #f7fafc;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text-dark);
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        /* --- 头部 --- */
        header {
            padding: 1.5rem 0;
        }
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 1.5rem;
            font-weight: 800;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        nav ul {
            list-style: none;
            display: flex;
            gap: 2.5rem;
        }
        nav a {
            text-decoration: none;
            color: var(--text-light);
            font-weight: 500;
            transition: color 0.3s;
        }
        nav a:hover {
            color: var(--text-dark);
        }
        /* --- 主要内容 --- */
        main {
            padding: 5rem 0;
        }
        .hero-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }
        .hero-content h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            font-weight: 800;
        }
        .hero-content p {
            font-size: 1.25rem;
            color: var(--text-light);
            margin-bottom: 2rem;
        }
        .hero-buttons {
            display: flex;
            gap: 1rem;
        }
        .btn-primary {
            padding: 1rem 2rem;
            background: var(--primary-gradient);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
        }
        .btn-secondary {
            padding: 1rem 2rem;
            background: transparent;
            color: var(--text-dark);
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-secondary:hover {
            border-color: #667eea;
            color: #667eea;
        }
        .hero-image {
            position: relative;
        }
        .hero-image img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }
        .floating-shape {
            position: absolute;
            border-radius: 50%;
            background: var(--primary-gradient);
            opacity: 0.1;
            animation: float 6s ease-in-out infinite;
        }
        .shape-1 {
            width: 100px;
            height: 100px;
            top: -50px;
            right: -30px;
        }
        .shape-2 {
            width: 150px;
            height: 150px;
            bottom: -70px;
            left: -50px;
            animation-delay: -3s;
        }
        /* --- 功能区 --- */
        .features {
            padding: 5rem 0;
            background-color: var(--bg-light);
        }
        .features h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-5px);
        }
        .feature-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-gradient);
            border-radius: 10px;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }
        .feature-card h3 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }
        .feature-card p {
            color: var(--text-light);
        }
        /* --- 动画 --- */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        /* --- 响应式 --- */
        @media (max-width: 968px) {
            .hero-section {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .hero-content h1 { font-size: 2.5rem; }
            .hero-buttons { justify-content: center; }
            nav ul { gap: 1.5rem; }
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-content">
            <div class="logo">CloudFlow</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>
        <section class="hero-section container">
            <div class="hero-content">
                <h1>让团队协作，从未如此简单</h1>
                <p>CloudFlow 是一款现代化的项目管理与团队协作平台，帮助您的团队高效、有序地完成每一个项目。</p>
                <div class="hero-buttons">
                    <button class="btn-primary">免费开始</button>
                    <button class="btn-secondary">观看演示</button>
                </div>
            </div>
            <div class="hero-image">
                <div class="floating-shape shape-1"></div>
                <div class="floating-shape shape-2"></div>
                <img src="https://via.placeholder.com/800x500/667eea/ffffff?text=SaaS+App+Dashboard" alt="SaaS应用仪表盘">
            </div>
        </section>
        <section class="features">
            <div class="container">
                <h2>强大功能，助力业务增长</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">📊</div>
                        <h3>实时数据分析</h3>
                        <p>直观的仪表盘和详细的报告，让您随时掌握项目进展和团队绩效。</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🤝</div>
                        <h3>无缝团队协作</h3>
                        <p>内置聊天、评论和文件共享功能，打破沟通壁垒，提升协作效率。</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🔒</div>
                        <h3>企业级安全</h3>
                        <p>采用银行级加密技术，确保您的数据安全，满足最严格的合规要求。</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>
</html>

模板4：在线商店/电商首页

  • 特点：产品展示清晰、促销信息突出、购物流程引导明确。
  • 技术栈：CSS Grid布局、产品卡片设计、标签样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">潮流前线 - 在线商店</title>
    <style>
        /* --- 全局样式 --- */
        :root {
            --primary-color: #e53e3e;
            --text-color: #2d3748;
            --light-gray: #f7fafc;
            --border-color: #e2e8f0;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
            color: var(--text-color);
            background-color: var(--light-gray);
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        /* --- 头部 --- */
        header {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }
        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary-color);
            text-decoration: none;
        }
        .search-bar {
            flex-grow: 1;
            max-width: 500px;
            margin: 0 2rem;
            position: relative;
        }
        .search-bar input {
            width: 100%;
            padding: 0.7rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 25px;
            outline: none;
        }
        .search-bar button {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-color);
            cursor: pointer;
        }
        .header-actions {
            display: flex;
            gap: 1.5rem;
        }
        .header-actions a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        .header-actions a:hover {
            color: var(--primary-color);
        }
        /* --- 导航菜单 --- */
        .main-nav {
            border-top: 1px solid var(--border-color);
        }
        .main-nav ul {
            list-style: none;
            display: flex;
            padding: 1rem 0;
        }
        .main-nav li {
            position: relative;
        }
        .main-nav a {
            text-decoration: none;
            color: var(--text-color);
            padding: 0 1.5rem;
            font-weight: 500;
            display: block;
        }
        .main-nav a:hover {
            color: var(--primary-color);
        }
        .sale-banner {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: 0.5rem;
            font-weight: bold;
        }
        /* --- 主要内容 --- */
        main {
            padding: 2rem 0;
        }
        .section-title {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .view-all {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
        }
        /* --- 产品网格 --- */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 2rem;
        }
        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        }
        .product-image-wrapper {
            position: relative;
            padding-top: 100%; /* 1:1 Aspect Ratio */
            overflow: hidden;
        }
        .product-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        .product-card:hover .product-image {
            transform: scale(1.05);
        }
        .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: var(--primary-color);
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        .product-info {
            padding: 1rem;
        }
        .product-name {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            height: 2.5em; /* 固定高度防止跳动 */
            overflow: hidden;
        }
        .product-price {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
        }
        .current-price {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        .original-price {
            font-size: 1rem;
            color: #a0aec0;
            text-decoration: line-through;
        }
        .add-to-cart {
            width: 100%;
            padding: 0.7rem;
            margin-top: 1rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .add-to-cart:hover {
            background-color: #c53030;
        }
        /* --- 页脚 --- */
        footer {
            background-color: #2d3748;
            color: white;
            padding: 3rem 0 1.5rem;
            margin-top: 4rem;
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        .footer-column h4 {
            margin-bottom: 1rem;
        }
        .footer-column ul {
            list-style: none;
        }
        .footer-column a {
            color: #cbd5e0;
            text-decoration: none;
            line-height: 2;
            transition: color 0.3s;
        }
        .footer-column a:hover {
            color: white;
        }
        .footer-bottom {
            text-align: center;
            padding-top: 1.5rem;
            border-top: 1px solid #4a5568;
            color: #a0aec0;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-top container">
            <a href="#" class="logo">潮流前线</a>
            <div class="search-bar">
                <input type="text" placeholder="搜索商品...">
                <button>🔍</button>
            </div>
            <div class="header-actions">
                <a href="#">👤 我的账户</a>
                <a href="#">❤️ 收藏夹</a>
                <a href="#">🛒 购物车 (0)</a>
            </div>
        </div>
        <nav class="main-nav">
            <ul class="container">
                <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>
                <li><a href="#">配饰</a></li>
                <li><a href="#">优惠活动</a></li>
            </ul>
        </nav>
        <div class="sale-banner">
            🔥 限时特惠：全场满299减50，满599减120！
        </div>
    </header>
    <main>
        <div class="container">
            <section>
                <h2 class="section-title">
                    <span>为你推荐</span>
                    <a href="#" class="view-all">查看全部 →</a>
                </h2>
                <div class="product-grid">
                    <div class="product-card">
                        <div class="product-image-wrapper">
                            <img src="https://via.placeholder.com/300x300/e53e3e/ffffff?text=商品1" alt="商品图片" class="product-image">
                            <span class="product-badge">热卖</span>
                        </div>
                        <div class="product-info">
                            <h3 class="product-name">2025秋季新款潮流卫衣 男装宽松连帽衫</h3>
                            <div class="product-price">
                                <span class="current-price">¥199</span>
                                <span class="original-price">¥299</span>
                            </div>
                            <button class="add-to-cart">加入购物车</button>
                        </div>
                    </div>
                    <div class="product-card">
                        <div class="product-image-wrapper">
                            <img src="https://via.placeholder.com/300x
164个div css精美网页模板
（图片来源网络，侵删）