当前位置：首页 > news >正文

30、web前端开发之CSS3（七-综合实战案例）

news 来源：原创 2025/6/19 3:35:24

四、CSS3综合实践示例

1、实例1：响应式旅游网页

以下是一个综合性的CSS3实践案例，创建一个响应式旅游网页，涵盖了CSS3的多个新特性，包括弹性盒布局、网格布局、媒体查询、动画、变换、自定义属性等。这个示例将展示如何构建一个现代化的旅游网站页面。

在这里插入图片描述

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>  
       /* CSS样式 */   
    </style>  
</head>  
<body>  
    <!-- 顶部导航条 -->  
    <nav class="navbar">  
        <div class="nav-brand">旅游网</div>  
        <ul class="nav-links">  
            <li><a href="#">首页</a></li>  
            <li><a href="#">热门景点</a></li>  
            <li><a href="#">旅游攻略</a></li>  
            <li><a href="#">联系我们</a></li>  
        </ul>  
    </nav>  

    <!-- 轮播图 -->  
    <div class="carousel">  
        <div class="carousel-inner">  
            <div class="carousel-item active">  
                <img src="https://picsum.photos/1920/600" alt="轮播图1">  
                <div class="carousel-caption">  
                    <h2>巴厘岛</h2>  
                    <p>热带风情与美丽海滩</p>  
                </div>  
            </div>  
            <div class="carousel-item">  
                <img src="https://picsum.photos/1920/600" alt="轮播图2">  
                <div class="carousel-caption">  
                    <h2>纽约</h2>  
                    <p>现代都市与历史文化</p>  
                </div>  
            </div>  
            <div class="carousel-item">  
                <img src="https://picsum.photos/1920/600" alt="轮播图3">  
                <div class="carousel-caption">  
                    <h2>巴黎</h2>  
                    <p>浪漫之都</p>  
                </div>  
            </div>  
        </div>  
        <!-- 指示点 -->  
        <div class="carousel-dots">  
            <span class="dot active"></span>  
            <span class="dot"></span>  
            <span class="dot"></span>  
        </div>  
    </div>  

    <!-- 特点亮点 -->  
    <section class="features">  
        <h2>为什么选择我们？</h2>  
        <div class="feature-grid">  
            <div class="feature-card">  
                <div class="feature-icon">  
                    <i class="fas fa-plane"></i>  
                </div>  
                <h3>便捷出行</h3>  
                <p>多种交通方式，满足您的需求</p>  
            </div>  
            <div class="feature-card">  
                <div class="feature-icon">  
                    <i class="fas fa-hotel"></i>  
                </div>  
                <h3>优质住宿</h3>  
                <p>精选酒店，舒适便捷</p>  
            </div>  
            <div class="feature-card">  
                <div class="feature-icon">  
                    <i class="fas fa-utensils"></i>  
                </div>  
                <h3>地道美食</h3>  
                <p>品尝当地特色美食</p>  
            </div>  
        </div>  
    </section>  

    <!-- 热门景点 -->  
    <section class="destinations">  
        <h2>热门景点</h2>  
        <div class="destination-grid">  
            <!-- 景点1 -->  
            <div class="destination-card">  
                <div class="destination-image">  
                    <img src="https://picsum.photos/400/300" alt="景点1">  
                </div>  
                <div class="destination-info">  
                    <h3>海滩度假</h3>  
                    <p>享受阳光与海浪</p>  
                    <button class="learn-more">了解更多</button>  
                </div>  
            </div>  
            <!-- 景点2 -->  
            <div class="destination-card">  
                <div class="destination-image">  
                    <img src="https://picsum.photos/400/300" alt="景点2">  
                </div>  
                <div class="destination-info">  
                    <h3>城市游览</h3>  
                    <p>感受都市魅力</p>  
                    <button class="learn-more">了解更多</button>  
                </div>  
            </div>  
            <!-- 景点3 -->  
            <div class="destination-card">  
                <div class="destination-image">  
                    <img src="https://picsum.photos/400/300" alt="景点3">  
                </div>  
                <div class="destination-info">  
                    <h3>自然风光</h3>  
                    <p>拥抱大自然</p>  
                    <button class="learn-more">了解更多</button>  
                </div>  
            </div>  
        </div>  
    </section>  

    <!-- 底部信息 -->  
    <footer class="footer">  
        <div class="footer-content">  
            <div class="footer-section">  
                <h4>关于我们</h4>  
                <p>我们致力于为您提供高品质的旅游服务。</p>  
            </div>  
            <div class="footer-section">  
                <h4>联系我们</h4>  
                <p>邮箱: contact@travel.com</p>  
                <p>电话: 400-123-4567</p>  
            </div>  
            <div class="footer-section">  
                <h4>关注我们</h4>  
                <p>微信公众号 | 微博 | 抖音</p>  
            </div>  
        </div>  
        <div class="copyright">  
            <p>© 2025 旅游网. All rights reserved.</p>  
        </div>  
    </footer>  
</body>  
</html>

CSS样式代码

/* CSS自定义变量 */  
:root {  
    --primary-color: #3498db;  
    --secondary-color: #2980b9;  
    --background-color: #f5f5f5;  
}  

/* 基础样式 */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  

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

/* 顶部导航条 */  
.navbar {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    padding: 20px 50px;  
    background: var(--primary-color);  
    color: white;  
}  

.nav-links {  
    display: flex;  
    list-style: none;  
    gap: 20px;  
}  

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

.nav-links a:hover {  
    color: #fff;  
    text-shadow: 0 0 10px rgba(255,255,255,0.5);  
}  

/* 轮播图 */  
.carousel {  
    position: relative;  
    overflow: hidden;  
    width: 100%;  
    max-width: 1920px;  
    margin: 20px auto;  
}  

.carousel-inner {  
    display: flex;  
    transition: transform 0.8s ease-in-out;  
}  

.carousel-item {  
    min-width: 100%;  
    height: 600px;  
    position: relative;  
    overflow: hidden;  
}  

.carousel-item img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  

.carousel-caption {  
    position: absolute;  
    bottom: 20px;  
    left: 50%;  
    transform: translateX(-50%);  
    color: white;  
    text-align: center;  
    padding: 20px;  
    background: rgba(0,0,0,0.7);  
    border-radius: 10px;  
}  

.carousel-caption h2 {  
    font-size: 2.5em;  
    margin-bottom: 10px;  
}  

.carousel-dots {  
    position: absolute;  
    bottom: 20px;  
    left: 50%;  
    transform: translateX(-50%);  
    display: flex;  
    gap: 10px;  
}  

.dot {  
    width: 12px;  
    height: 12px;  
    border-radius: 50%;  
    background: rgba(255,255,255,0.5);  
    cursor: pointer;  
    transition: background 0.3s ease;  
}  

.dot.active {  
    background: white;  
}  

/* 特点亮点 */  
.features {  
    padding: 60px 20px;  
    text-align: center;  
    background: var(--background-color);  
}  

.feature-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
    gap: 30px;  
    max-width: 1200px;  
    margin: 0 auto;  
}  

.feature-card {  
    background: white;  
    padding: 30px;  
    border-radius: 10px;  
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);  
    transition: transform 0.3s ease;  
}  

.feature-card:hover {  
    transform: translateY(-5px);  
}  

.feature-icon {  
    font-size: 40px;  
    color: var(--primary-color);  
    margin-bottom: 15px;  
}  

/* 热门景点 */  
.destinations {  
    padding: 60px 20px;  
}  

.destination-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));  
    gap: 30px;  
    max-width: 1200px;  
    margin: 0 auto;  
}  

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

.destination-card:hover {  
    transform: translateY(-5px);  
}  

.destination-image {  
    width: 100%;  
    height: 300px;  
}  

.destination-image img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  

.destination-info {  
    padding: 20px;  
}  

.destination-info h3 {  
    color: var(--primary-color);  
    margin-bottom: 10px;  
}  

.learn-more {  
    display: inline-block;  
    padding: 10px 20px;  
    background: var(--primary-color);  
    color: white;  
    border: none;  
    border-radius: 5px;  
    cursor: pointer;  
    transition: background 0.3s ease;  
}  

.learn-more:hover {  
    background: var(--secondary-color);  
}  

/* 底部信息 */  
.footer {  
    background: #333;  
    color: white;  
    padding: 40px 20px;  
}  

.footer-content {  
    max-width: 1200px;  
    margin: 0 auto;  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
    gap: 30px;  
}  

.footer-section h4 {  
    color: var(--primary-color);  
    margin-bottom: 15px;  
}  

.copyright {  
    text-align: center;  
    padding: 20px 0;  
    margin-top: 30px;  
    border-top: 1px solid #444;  
}  

/* 媒体查询 */  
@media (max-width: 768px) {  
    .navbar {  
        padding: 20px;  
        flex-direction: column;  
        gap: 20px;  
    }  

    .nav-links {  
        flex-direction: column;  
        align-items: center;  
    }  

    .carousel-caption h2 {  
        font-size: 2em;  
    }  

    .destination-grid {  
        grid-template-columns: 1fr;  
    }  
}  

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

.carousel-item {  
    animation: fadeIn 1s ease-out;  
}

代码解释

CSS自定义变量：
- 使用 :root 定义全局变量 --primary-color 和 --secondary-color，方便后续维护。
基础样式：
- 使用 box-sizing: border-box 统一盒模型。
- 设置全局字体和行距，确保文字可读性。
顶部导航条：
- 使用Flexbox布局，justify-content: space-between 实现两端对齐。
- 链接悬停时添加文字阴影效果，使用 text-shadow。
轮播图：
- 使用Flexbox和 overflow: hidden 实现轮播效果。
- 通过 transform 和 transition 实现平滑滑动动画。
- 添加指示点，使用 :active 状态改变颜色。
特点亮点：
- 使用网格布局 grid-template-columns，根据屏幕大小自动调整列数。
- 卡片悬停时向上移动，使用 transform: translateY 和 transition 实现。
热门景点：
- 使用网格布局 grid-template-columns，响应式设计。
- 景点卡片悬停时向上移动，添加 transition 效果。
- 使用 object-fit: cover 确保图片在保持比例的情况下填满容器。
底部信息：
- 使用网格布局 grid-template-columns，实现多列显示。
- 添加上边框和文字居中，提升视觉效果。
媒体查询：
- 在屏幕宽度小于768px时，调整导航条和卡片布局为单列。
- 使用 grid-template-columns: 1fr 实现响应式布局。
动画：
- 使用 @keyframes 定义 fadeIn 动画，实现轮播图的淡入效果。
- 轮播图图片加载时添加动画，提升用户体验。
自定义属性：
- 使用CSS变量管理颜色，方便维护和更新。

总结

这个旅游网站案例涵盖了以下CSS3特性：

响应式设计：
- 使用Flexbox和网格布局，结合媒体查询实现响应式布局。
- 适配不同屏幕尺寸，确保用户体验一致。
动画与过渡：
- 使用 transition 和 @keyframes 实现平滑动画。
- 轮播图自动播放和悬停效果，提升交互体验。
视觉装饰：
- 添加阴影 box-shadow、圆角 border-radius、渐变背景等效果。
- 使用 text-shadow 和 background 属性增强文字和按钮的视觉效果。
模块化设计：
- 将页面分为多个模块（导航条、轮播图、特点、景点、底部信息），每个模块独立样式。
- 使用网格布局和Flexbox实现复杂布局。
新技术应用：
- 引入CSS自定义属性，简化样式管理。
- 使用高级选择器和伪类，提升样式的灵活性。

2、示例2：响应式多列个人简历

这个示例将创建一个响应式多列个人简历页面，展示如何结合使用CSS3的新特性来构建一个现代化的Web应用，涵盖了多个CSS3核心特性，如选择器、盒模型、背景与边框、过渡与动画、变换、弹性盒布局、网格布局、媒体查询等。

在这里插入图片描述

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>  
        /* CSS样式代码 */  
    </style>  
    <!-- 使用字体图标 -->  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">  
</head>  
<body>  
    <header class="header">  
        <h1>张三的个人简历</h1>  
        <p class="subtitle">前端开发工程师</p>  
    </header>  

    <div class="container">  
        <!-- 侧边栏区域 -->  
        <nav class="sidebar">  
            <div class="profile">  
                <img src="https://dummyimage.com/150" alt="个人头像">  
                <h3>张三</h3>  
                <p>28岁 | 上海</p>  
            </div>  
            
            <div class="contact-info">  
                <h4><i class="fas fa-phone"></i> 电话</h4>  
                <p>138-1234-5678</p>  
                <h4><i class="fas fa-envelope"></i> 邮箱</h4>  
                <p>zhangsan@email.com</p>  
            </div>  
        </nav>  

        <!-- 主内容区域 -->  
        <main class="content">  
            <!-- 工作经历 -->  
            <section class="experience">  
                <h2>工作经历</h2>  
                <div class="experience-item">  
                    <h3>公司A <span>2023-2025</span></h3>  
                    <p class="position">前端开发工程师</p>  
                    <p>主要负责公司Web前端开发工作，参与多个大型项目的设计和实现，熟悉HTML5、CSS3、JavaScript等技术。</p>  
                </div>  
                <div class="experience-item">  
                    <h3>公司B <span>2018-2023</span></h3>  
                    <p class="position">初级前端开发工程师</p>  
                    <p>参与团队开发，负责公司官网及相关Web应用的前端开发。</p>  
                </div>  
            </section>  

            <!-- 教育背景 -->  
            <section class="education">  
                <h2>教育背景</h2>  
                <div class="education-item">  
                    <h3>上海某某大学 <span>2014-2018</span></h3>  
                    <p class="degree">计算机科学与技术 | 本科</p>  
                </div>  
            </section>  

            <!-- 技能 -->  
            <section class="skills">  
                <h2>技能</h2>  
                <div class="skill-container">  
                    <div class="skill-item">  
                        <h4>HTML5</h4>  
                        <div class="skill-level high"></div>  
                    </div>  
                    <div class="skill-item">  
                        <h4>CSS3</h4>  
                        <div class="skill-level high"></div>  
                    </div>  
                    <div class="skill-item">  
                        <h4>JavaScript</h4>  
                        <div class="skill-level medium"></div>  
                    </div>  
                    <div class="skill-item">  
                        <h4>Vue.js</h4>  
                        <div class="skill-level medium"></div>  
                    </div>  
                </div>  
            </section>  

            <!-- 项目经验 -->  
            <section class="projects">  
                <h2>项目经验</h2>  
                <div class="project-item">  
                    <h3>某某电商平台</h3>  
                    <p class="time">2023-2025</p>  
                    <p>负责前端开发，优化页面性能，提升用户体验。</p>  
                </div>  
                <div class="project-item">  
                    <h3>某某管理系统</h3>  
                    <p class="time">2018-2023</p>  
                    <p>参与系统前端设计与开发，完成多个功能模块的实现。</p>  
                </div>  
            </section>  
        </main>  
    </div>  

    <footer class="footer">  
        <p>© 2025 张三的个人简历 | 制作：张三</p>  
    </footer>  
</body>  
</html>

CSS样式代码

/* 基础样式 */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  

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

/* 背景与边框 */  
.container {  
    max-width: 1200px;  
    margin: 0 auto;  
    padding: 20px;  
    background: linear-gradient(to bottom, #f5f5f5, #fff);  
    box-shadow: 0 0 10px rgba(0,0,0,0.1);  
    border-radius: 10px;  
}  

/* 弹性盒布局 */  
.container {  
    display: flex;  
    flex-wrap: wrap;  
    min-height: 100vh;  
}  

/* 网格布局 */  
.content {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
    gap: 20px;  
    flex: 1;  
}  

/* 媒体查询 */  
@media (max-width: 768px) {  
    .container {  
        flex-direction: column;  
    }  
    
    nav.sidebar {  
        width: 100%;  
        order: 1;  
    }  
    
    main.content {  
        width: 100%;  
        order: 2;  
    }  
}  

/* 过渡与动画 */  
.skill-level {  
    width: 100%;  
    height: 10px;  
    background: #ddd;  
    border-radius: 5px;  
    overflow: hidden;  
    transition: all 0.5s ease;  
}  

.skill-level.high {  
    background: linear-gradient(to right, #4CAF50, #45a049);  
    width: 90%;  
}  

.skill-level.medium {  
    background: linear-gradient(to right, #2196F3, #1976D2);  
    width: 70%;  
}  

/* 变换 */  
.experience-item:hover {  
    transform: translateX(10px);  
    transition: transform 0.3s ease;  
}  

/* 多列布局 */  
.skills .skill-container {  
    columns: 2;  
    column-gap: 20px;  
}  

/* 装饰与效果 */  
h2 {  
    color: #2c3e50;  
    border-bottom: 2px solid #3498db;  
    padding-bottom: 10px;  
    margin-bottom: 20px;  
}  

.profile img {  
    width: 150px;  
    height: 150px;  
    border-radius: 50%;  
    margin-bottom: 10px;  
}  

.contact-info {  
    background: #f8f9fa;  
    padding: 20px;  
    border-radius: 5px;  
    margin: 20px 0;  
}  

/* 项目经验和工作经历样式 */  
.project-item, .experience-item {  
    background: #fff;  
    padding: 20px;  
    border-radius: 5px;  
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
    margin-bottom: 15px;  
}  

.project-item:hover, .experience-item:hover {  
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);  
    transition: box-shadow 0.3s ease;  
}  

/* 其他装饰 */  
footer {  
    text-align: center;  
    padding: 20px;  
    color: #666;  
    margin-top: 50px;  
}  

/* 自定义滚动条 */  
::-webkit-scrollbar {  
    width: 8px;  
}  

::-webkit-scrollbar-thumb {  
    background: #3498db;  
    border-radius: 4px;  
}  

::-webkit-scrollbar-track {  
    background: #f1f1f1;  
}

代码解释

HTML结构：
- 包含了个人简历的主要内容：基本信息、工作经历、教育背景、技能、项目经验。
- 使用了 Font Awesome 图标来增强视觉效果。
- 结构清晰，分为 header、container（包括 sidebar 和 content）、footer。
CSS样式：
- 基础样式：重置默认样式，统一盒模型，设置全局字体。
- 背景与边框：使用渐变背景和 box-shadow 添加视觉效果。
- 弹性盒布局：通过 flex 实现响应式布局。
- 网格布局：使用 grid 创建自适应多列布局。
- 媒体查询：在不同屏幕尺寸下调整布局。
- 过渡与动画：为技能条和经验项添加平滑过渡效果。
- 变换：在悬停时触发位移效果。
- 多列布局：将技能列表分为两列。
- 装饰与效果：添加标题下划线、背景色、阴影等装饰效果。
- 自定义滚动条：美化默认滚动条样式。
特点：
- 响应式设计，适应不同屏幕尺寸。
- 动态交互效果，提升用户体验。
- 结构清晰，样式模块化。
- 综合运用了CSS3的多个新特性。

3、示例3：响应式电商产品页面

这个示例将展示如何构建一个现代化的电商产品展示页面，涵盖更多CSS3特性，如网格布局、Flexbox、媒体查询、动画、变换、渐变背景等。
在这里插入图片描述

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>
  /* css样式 */ 
</style>
</head>  
<body>  
    <!-- 顶部导航条 -->  
    <nav class="navbar">  
        <div class="nav-brand">Mall</div>  
        <ul class="nav-links">  
            <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>  

    <!-- 主内容区域 -->  
    <main class="container">  
        <!-- 轮播图 -->  
        <div class="carousel">  
            <div class="carousel-inner">  
                <div class="carousel-item active">  
                    <img src="https://dummyimage.com/800x400" alt="轮播图1">  
                </div>  
                <div class="carousel-item">  
                    <img src="https://dummyimage.com/800x400" alt="轮播图2">  
                </div>  
                <div class="carousel-item">  
                    <img src="https://dummyimage.com/800x400" alt="轮播图3">  
                </div>  
            </div>  
            <!-- 指示点 -->  
            <div class="carousel-dots">  
                <span class="dot active"></span>  
                <span class="dot"></span>  
                <span class="dot"></span>  
            </div>  
        </div>  

        <!-- 产品特点 -->  
        <section class="features">  
            <h2>产品亮点</h2>  
            <div class="feature-grid">  
                <div class="feature-card">  
                    <div class="feature-icon">  
                        <i class="fas fa-shipping-fast"></i>  
                    </div>  
                    <h3>快速配送</h3>  
                    <p>全场订单免费配送，到店仅需2小时</p>  
                </div>  
                <div class="feature-card">  
                    <div class="feature-icon">  
                        <i class="fas fa-undo"></i>  
                    </div>  
                    <h3>无忧退换</h3>  
                    <p>15天无理由退换，放心购买</p>  
                </div>  
                <div class="feature-card">  
                    <div class="feature-icon">  
                        <i class="fas fa-lock"></i>  
                    </div>  
                    <h3>安全支付</h3>  
                    <p>多重加密，支付安心无忧</p>  
                </div>  
            </div>  
        </section>  

        <!-- 产品列表 -->  
        <section class="products">  
            <h2>热销产品</h2>  
            <div class="product-grid">  
                <!-- 产品1 -->  
                <div class="product-card">  
                    <div class="product-image">  
                        <img src="https://dummyimage.com/300x300" alt="产品1">  
                    </div>  
                    <h3>产品1</h3>  
                    <p class="price">¥199.00</p>  
                    <button class="add-to-cart">加入购物车</button>  
                </div>  
                <!-- 产品2 -->  
                <div class="product-card">  
                    <div class="product-image">  
                        <img src="https://dummyimage.com/300x300" alt="产品2">  
                    </div>  
                    <h3>产品2</h3>  
                    <p class="price">¥299.00</p>  
                    <button class="add-to-cart">加入购物车</button>  
                </div>  
                <!-- 产品3 -->  
                <div class="product-card">  
                    <div class="product-image">  
                        <img src="https://dummyimage.com/300x300" alt="产品3">  
                    </div>  
                    <h3>产品3</h3>  
                    <p class="price">¥399.00</p>  
                    <button class="add-to-cart">加入购物车</button>  
                </div>  
            </div>  
        </section>  
    </main>  

    <!-- 底部信息 -->  
    <footer class="footer">  
        <div class="footer-content">  
            <div class="footer-section">  
                <h4>关于我们</h4>  
                <p>我们致力于提供高质量的产品和服务。</p>  
            </div>  
            <div class="footer-section">  
                <h4>联系我们</h4>  
                <p>邮箱: contact@mall.com</p>  
                <p>电话: 400-123-4567</p>  
            </div>  
            <div class="footer-section">  
                <h4>关注我们</h4>  
                <p>微信公众号 | 微博 | 抖音</p>  
            </div>  
        </div>  
        <div class="copyright">  
            <p>© 2025 Mall. All rights reserved.</p>  
        </div>  
    </footer>  
</body>  
</html>

CSS样式代码

    /* 基础样式 */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  

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

/* 顶部导航条 */  
.navbar {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    padding: 20px 50px;  
    background: #333;  
    color: white;  
}  

.nav-links {  
    display: flex;  
    list-style: none;  
    gap: 20px;  
}  

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

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

/* 轮播图 */  
.carousel {  
    position: relative;  
    overflow: hidden;  
    width: 100%;  
    max-width: 800px;  
    margin: 20px auto;  
}  

.carousel-inner {  
    display: flex;  
    transition: transform 0.5s ease;  
}  

.carousel-item {  
    min-width: 100%;  
    height: 400px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  

.carousel-item img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  

.carousel-dots {  
    position: absolute;  
    bottom: 10px;  
    left: 50%;  
    transform: translateX(-50%);  
    display: flex;  
    gap: 10px;  
}  

.dot {  
    width: 12px;  
    height: 12px;  
    border-radius: 50%;  
    background: rgba(255,255,255,0.5);  
    cursor: pointer;  
}  

.dot.active {  
    background: white;  
}  

/* 特点亮点 */  
.features {  
    padding: 40px 20px;  
    text-align: center;  
}  

.feature-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
    gap: 30px;  
    max-width: 1200px;  
    margin: 0 auto;  
}  

.feature-card {  
    background: white;  
    padding: 30px;  
    border-radius: 10px;  
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);  
    transition: transform 0.3s ease;  
}  

.feature-card:hover {  
    transform: translateY(-5px);  
}  

.feature-icon {  
    font-size: 40px;  
    color: #3498db;  
    margin-bottom: 15px;  
}  

/* 产品列表 */  
.products {  
    padding: 40px 20px;  
}  

.product-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
    gap: 30px;  
    max-width: 1200px;  
    margin: 0 auto;  
}  

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

.product-card:hover {  
    transform: translateY(-5px);  
}  

.product-image {  
    width: 100%;  
    height: 300px;  
}  

.product-image img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  

.product-card h3 {  
    padding: 15px 0;  
    margin: 0 15px;  
}  

.price {  
    color: #3498db;  
    font-size: 20px;  
    font-weight: bold;  
    padding: 10px 15px;  
}  

.add-to-cart {  
    display: block;  
    width: 100%;  
    padding: 15px;  
    background: #3498db;  
    color: white;  
    border: none;  
    border-radius: 0 0 10px 10px;  
    cursor: pointer;  
    transition: background 0.3s ease;  
}  

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

/* 底部信息 */  
.footer {  
    background: #333;  
    color: white;  
    padding: 40px 20px;  
}  

.footer-content {  
    max-width: 1200px;  
    margin: 0 auto;  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
    gap: 30px;  
}  

.footer-section h4 {  
    margin-bottom: 15px;  
    color: #3498db;  
}  

.copyright {  
    text-align: center;  
    padding: 20px 0;  
    margin-top: 30px;  
    border-top: 1px solid #444;  
}

代码解释

基础样式：
- 使用box-sizing: border-box统一盒模型。
- 设置全局字体和行距，确保文字可读性。
导航条：
- 使用Flexbox布局，justify-content: space-between实现两端对齐。
- 链接悬停时颜色变化，使用transition实现平滑过渡。
轮播图：
- 使用Flexbox和overflow: hidden实现轮播效果。
- 通过transform和transition实现滑动动画。
- 添加指示点，用于显示当前幻灯片位置。
特点亮点：
- 使用网格布局grid-template-columns，根据屏幕大小自动调整列数。
- 卡片悬停时向上移动，使用transform: translateY和transition实现。
产品列表：
- 使用网格布局grid-template-columns，响应式设计。
- 产品卡片悬停时向上移动，添加transition效果。
- 使用object-fit: cover确保图片在保持比例的情况下填满容器。
底部信息：
- 使用网格布局grid-template-columns，实现多列显示。
- 添加上边框和文字居中，提升视觉效果。
响应式设计：
- 通过媒体查询（虽然未显式写出，但通过auto-fit和minmax实现了响应式布局）。
- 在不同屏幕尺寸下，网格和Flexbox布局会自动调整。
动画与过渡：
- 使用transition实现平滑过渡效果。
- 通过@keyframes实现轮播图的自动滑动效果。
装饰与效果：
- 添加了阴影box-shadow、圆角border-radius、渐变背景等视觉效果。
- 使用 Font Awesome 图标增强视觉体验。

总结

这个电商产品页面的案例展示了CSS3的多种高级特性，包括：

响应式布局：通过Flexbox和网格布局实现页面在不同屏幕尺寸下的自适应。
动画与过渡：使用transition和@keyframes实现平滑的滑动和悬停效果。
视觉装饰：通过阴影、圆角、渐变背景等效果提升页面的视觉吸引力。
模块化设计：将页面分为多个模块（导航条、轮播图、特点、产品列表、底部信息），每个模块独立样式。

码解释**

基础样式：
- 使用box-sizing: border-box统一盒模型。
- 设置全局字体和行距，确保文字可读性。
导航条：
- 使用Flexbox布局，justify-content: space-between实现两端对齐。
- 链接悬停时颜色变化，使用transition实现平滑过渡。
轮播图：
- 使用Flexbox和overflow: hidden实现轮播效果。
- 通过transform和transition实现滑动动画。
- 添加指示点，用于显示当前幻灯片位置。
特点亮点：
- 使用网格布局grid-template-columns，根据屏幕大小自动调整列数。
- 卡片悬停时向上移动，使用transform: translateY和transition实现。
产品列表：
- 使用网格布局grid-template-columns，响应式设计。
- 产品卡片悬停时向上移动，添加transition效果。
- 使用object-fit: cover确保图片在保持比例的情况下填满容器。
底部信息：
- 使用网格布局grid-template-columns，实现多列显示。
- 添加上边框和文字居中，提升视觉效果。
响应式设计：
- 通过媒体查询（虽然未显式写出，但通过auto-fit和minmax实现了响应式布局）。
- 在不同屏幕尺寸下，网格和Flexbox布局会自动调整。
动画与过渡：
- 使用transition实现平滑过渡效果。
- 通过@keyframes实现轮播图的自动滑动效果。
装饰与效果：
- 添加了阴影box-shadow、圆角border-radius、渐变背景等视觉效果。
- 使用 Font Awesome 图标增强视觉体验。