web华为商城前端项目4页面

若安程序开发2025-11-12 11:20

源码获取魏：RACXDX 支持要求定制文档编写

目录

[1. 主题总结](#1. 主题总结)

[2. 页面分析与技术实现](#2. 页面分析与技术实现)

[2.1 首页（index.html）](#2.1 首页（index.html）)

[2.2 登录页面（login.html）](#2.2 登录页面（login.html）)

[2.3 注册页面（register.html）](#2.3 注册页面（register.html）)

[2.4 商品详情页面（product.html）](#2.4 商品详情页面（product.html）)

[2.5 全局技术实现](#2.5 全局技术实现)

1. 主题总结

本项目是一个基于现代前端技术开发的华为商城单页应用原型，提供了完整的电商网站核心功能。项目采用响应式设计，包含了商品展示、详情查看、用户登录注册等核心电商功能模块，旨在为用户提供流畅、直观的在线购物体验。项目结构清晰，代码组织合理，采用了纯前端技术栈实现，具有良好的可维护性和扩展性。

2. 页面分析与技术实现

2.1 首页（index.html）

**技术实现：**

  • **HTML5语义化结构**：使用`<header>`, `<nav>`, `<section>`, `<footer>`等语义化标签构建页面结构

  • **CSS3样式**：应用了盒模型、Flexbox布局、CSS过渡动画等现代CSS特性

  • **JavaScript交互**：实现了自动轮播图、导航菜单交互、页面滚动效果

  • **响应式设计**：通过媒体查询和容器适配不同屏幕尺寸
    **涵盖内容：**

  • **导航栏**：包含品牌Logo、多级商品分类导航（手机、笔记本、平板、智能穿戴等）和用户操作按钮

  • **轮播图**：展示华为最新产品，支持自动轮播、手动切换和指示器导航

  • **热门商品展示**：以网格布局展示精选商品，包含图片、名称、价格和查看详情按钮

  • **页脚信息**：包含版权声明和基本链接

复制代码 
<!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="css/style.css">
</head>
<body>
    <!-- 头部导航 -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <h1>华为商城</h1>
            </div>
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="index.html" class="nav-link active">首页</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link">手机</a>
                        <ul class="dropdown-menu">
                            <li><a href="product.html">Mate系列</a></li>
                            <li><a href="product.html">P系列</a></li>
                            <li><a href="product.html">nova系列</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link">笔记本</a>
                        <ul class="dropdown-menu">
                            <li><a href="product.html">MateBook</a></li>
                            <li><a href="product.html">MagicBook</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">平板</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">智能穿戴</a>
                    </li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- 轮播图 -->
    <section class="banner">
        <div class="banner-slider">
            <div class="slide active">
                <img src="images/1.png" alt="华为Mate60系列">
            </div>
            <div class="slide">
                <img src="images/2.png" alt="华为P60系列">
            </div>
            <div class="slide">
                <img src="images/3.png" alt="华为MateBook">
            </div>
            <!-- 轮播图控制按钮 -->
            <div class="slider-controls">
                <button class="slider-btn prev" onclick="prevSlide()">❮</button>
                <button class="slider-btn next" onclick="nextSlide()">❯</button>
            </div>
            <!-- 轮播图指示器 -->
            <div class="slider-indicators">
                <span class="indicator active" onclick="goToSlide(0)"></span>
                <span class="indicator" onclick="goToSlide(1)"></span>
                <span class="indicator" onclick="goToSlide(2)"></span>
            </div>
        </div>
    </section>

    <!-- 热门商品 -->
    <section class="products">
        <div class="container">
            <h2 class="section-title">热门商品</h2>
            <div class="product-grid">
                <div class="product-card">
                    <img src="images/4.png" alt="Mate60">
                    <h3>华为Mate60</h3>
                    <p class="price">¥6999</p>
                    <a href="product.html" class="btn btn-primary">查看详情</a>
                </div>
                <div class="product-card">
                    <img src="images/5.png" alt="P60">
                    <h3>华为Vision智慧屏 5</h3>
                    <p class="price">¥5999</p>
                    <a href="product.html" class="btn btn-primary">查看详情</a>
                </div>
                <div class="product-card">
                    <img src="images/6.png" alt="nova12">
                    <h3>华为nova12</h3>
                    <p class="price">¥2999</p>
                    <a href="product.html" class="btn btn-primary">查看详情</a>
                </div>
                <div class="product-card">
                    <img src="images/7.png" alt="MateBook">
                    <h3>华为MateBook</h3>
                    <p class="price">¥8999</p>
                    <a href="product.html" class="btn btn-primary">查看详情</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 华为商城. 保留所有权利.</p>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>

2.2 登录页面（login.html）

**技术实现：**

  • **表单设计与验证**：使用HTML5表单控件和JavaScript进行前端验证

  • **CSS模块化设计**：独立的认证页面样式，包含卡片式布局和交互效果

  • **JavaScript表单处理**：实现了用户名、密码验证及错误提示功能

  • **交互反馈**：通过CSS过渡和JavaScript实现按钮状态变化和表单反馈
    **涵盖内容：**

  • **统一导航头**：保持与首页一致的导航体验

  • **登录表单**：包含用户名/邮箱/手机号输入、密码输入、记住我选项和忘记密码链接

  • **社交媒体登录**：支持微信和QQ第三方登录

  • **注册引导**：提供前往注册页面的便捷链接

  • **表单验证**：实时验证输入内容并提供错误提示

复制代码 
<!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="css/style.css">
</head>
<body class="auth-body">
    <!-- 头部导航 -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <h1><a href="index.html">华为商城</a></h1>
            </div>
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link">手机</a>
                        <ul class="dropdown-menu">
                            <li><a href="product.html">Mate系列</a></li>
                            <li><a href="product.html">P系列</a></li>
                            <li><a href="product.html">nova系列</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link">笔记本</a>
                        <ul class="dropdown-menu">
                            <li><a href="product.html">MateBook</a></li>
                            <li><a href="product.html">MagicBook</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">平板</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">智能穿戴</a>
                    </li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login active">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- 登录表单 -->
    <section class="auth-section">
        <div class="auth-container">
            <div class="auth-card">
                <div class="auth-header">
                    <h2>欢迎回来</h2>
                    <p>登录您的华为商城账户</p>
                </div>
                <form id="loginForm" class="auth-form-content">
                    <div class="form-group">
                        <label for="loginUsername">用户名/邮箱/手机号</label>
                        <div class="input-wrapper">
                            <input type="text" id="loginUsername" name="loginUsername" required>
                            <span class="input-icon">👤</span>
                        </div>
                        <span class="error-message" id="loginUsername-error"></span>
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">密码</label>
                        <div class="input-wrapper">
                            <input type="password" id="loginPassword" name="loginPassword" required>
                            <span class="input-icon">🔒</span>
                        </div>
                        <span class="error-message" id="loginPassword-error"></span>
                    </div>
                    <div class="form-options">
                        <label class="checkbox-label">
                            <input type="checkbox" id="remember" name="remember">
                            <span class="checkmark"></span>
                            记住我
                        </label>
                        <a href="#" class="forgot-password">忘记密码？</a>
                    </div>
                    <button type="submit" class="btn btn-primary btn-large btn-auth">登录</button>
                </form>
                <div class="auth-divider">
                    <span>或者</span>
                </div>
                <div class="social-login">
                    <button class="btn btn-social btn-wechat">微信登录</button>
                    <button class="btn btn-social btn-qq">QQ登录</button>
                </div>
                <div class="auth-links">
                    <p>还没有账号？<a href="register.html">立即注册</a></p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 华为商城. 保留所有权利.</p>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>

2.3 注册页面（register.html）

**技术实现：**

  • **增强的表单验证**：实现了用户名、邮箱、手机号、密码强度等多维度验证

  • **密码确认机制**：确保用户密码输入一致性

  • **协议同意验证**：强制用户阅读并同意服务条款

  • **渐进增强设计**：基础功能在无JavaScript环境下仍可使用
    **涵盖内容：**

  • **统一导航体验**：与网站其他页面保持一致的导航栏

  • **完整注册表单**：包含用户名、邮箱、手机号、密码设置和确认等字段

  • **密码安全提示**：确保用户创建足够安全的账户密码

  • **用户协议确认**：链接到用户协议和隐私政策

  • **社交媒体注册**：支持通过微信和QQ快速注册

  • **登录引导**：为已有账户用户提供登录入口

    <!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="css/style.css"> </head> <body class="auth-body">
    复制代码 
      <!-- 注册表单 -->
  <section class="auth-section">
      <div class="auth-container">
          <div class="auth-card">
              <div class="auth-header">
                  <h2>创建账户</h2>
                  <p>加入华为商城，享受优质服务</p>
              </div>
              <form id="registerForm" class="auth-form-content">
                  <div class="form-group">
                      <label for="username">用户名</label>
                      <div class="input-wrapper">
                          <input type="text" id="username" name="username" required>
                          <span class="input-icon">👤</span>
                      </div>
                      <span class="error-message" id="username-error"></span>
                  </div>
                  <div class="form-group">
                      <label for="email">邮箱</label>
                      <div class="input-wrapper">
                          <input type="email" id="email" name="email" required>
                          <span class="input-icon">📧</span>
                      </div>
                      <span class="error-message" id="email-error"></span>
                  </div>
                  <div class="form-group">
                      <label for="phone">手机号</label>
                      <div class="input-wrapper">
                          <input type="tel" id="phone" name="phone" required>
                          <span class="input-icon">📱</span>
                      </div>
                      <span class="error-message" id="phone-error"></span>
                  </div>
                  <div class="form-group">
                      <label for="password">密码</label>
                      <div class="input-wrapper">
                          <input type="password" id="password" name="password" required>
                          <span class="input-icon">🔒</span>
                      </div>
                      <span class="error-message" id="password-error"></span>
                  </div>
                  <div class="form-group">
                      <label for="confirmPassword">确认密码</label>
                      <div class="input-wrapper">
                          <input type="password" id="confirmPassword" name="confirmPassword" required>
                          <span class="input-icon">🔒</span>
                      </div>
                      <span class="error-message" id="confirmPassword-error"></span>
                  </div>
                  <div class="form-options">
                      <label class="checkbox-label">
                          <input type="checkbox" id="agree" name="agree" required>
                          <span class="checkmark"></span>
                          我已阅读并同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
                      </label>
                  </div>
                  <button type="submit" class="btn btn-primary btn-large btn-auth">注册</button>
              </form>
              <div class="auth-divider">
                  <span>或者</span>
              </div>
              <div class="social-login">
                  <button class="btn btn-social btn-wechat">微信注册</button>
                  <button class="btn btn-social btn-qq">QQ注册</button>
              </div>
              <div class="auth-links">
                  <p>已有账号？<a href="login.html">立即登录</a></p>
              </div>
          </div>
      </div>
  </section>

  <!-- 页脚 -->
  <footer class="footer">
      <div class="container">
          <p>&copy; 华为商城. 保留所有权利.</p>
      </div>
  </footer>

  <script src="js/script.js"></script>
    </body> </html>

2.4 商品详情页面（product.html）

**技术实现：**

  • **图片切换功能**：通过缩略图点击切换主显示图片

  • **动态价格计算**：根据用户选择的商品规格（颜色、存储）实时更新价格

  • **选项卡式交互**：实现商品规格选择的视觉反馈

  • **购物车交互**：模拟商品加入购物车和立即购买流程
    **涵盖内容：**

  • **商品图片展示**：主图展示和缩略图切换功能

  • **商品信息**：包含名称、评分、详细描述和价格信息

  • **规格选择**：支持颜色（雅川青、雅丹白、墨玉黑）和存储容量（256GB、512GB、1TB）选择

  • **价格动态更新**：根据不同规格自动计算并显示对应价格

  • **购物操作**：提供加入购物车和立即购买按钮

  • **用户操作反馈**：通过弹窗确认用户操作结果

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为Mate60 - 商品详情</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 头部导航 -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <h1><a href="index.html">华为商城</a></h1>
            </div>
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link">手机</a>
                        <ul class="dropdown-menu">
                            <li><a href="product.html">Mate系列</a></li>
                            <li><a href="product.html">P系列</a></li>
                            <li><a href="product.html">nova系列</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link">笔记本</a>
                        <ul class="dropdown-menu">
                            <li><a href="product.html">MateBook</a></li>
                            <li><a href="product.html">MagicBook</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">平板</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">智能穿戴</a>
                    </li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- 商品详情 -->
    <section class="product-detail">
        <div class="container">
            <div class="product-content">
                <div class="product-images">
                    <div class="main-image">
                        <img src="images/8.png" alt="华为Mate60" id="mainImage">
                    </div>
                    <div class="thumbnail-images">
                        <img src="images/9.png" alt="图片1" class="thumbnail active" onclick="changeImage(this)">
                        <img src="images/10.png" alt="图片2" class="thumbnail" onclick="changeImage(this)">
                    </div>
                </div>
                <div class="product-info">
                    <h1>华为Mate60</h1>
                    <div class="product-rating">
                        <span class="stars">★★★★★</span>
                        <span class="rating-text">5.0   麒麟9000S芯片，性能强劲  超感知徕卡影像系统  5000mAh大容量电池   (128条评价)</span>
                    </div>
                    <div class="product-price">
                        <span class="current-price">¥6999</span>
                        <span class="original-price">¥7999</span>
                        <span class="discount">-12%</span>
                    </div>
                    <div class="product-options">
                        <div class="option-group">
                            <label>颜色：</label>
                            <div class="color-options">
                                <button class="color-btn active" data-color="雅川青">雅川青</button>
                                <button class="color-btn" data-color="雅丹白">雅丹白</button>
                                <button class="color-btn" data-color="墨玉黑">墨玉黑</button>
                            </div>
                        </div>
                        <div class="option-group">
                            <label>存储：</label>
                            <div class="storage-options">
                                <button class="storage-btn active" data-storage="256GB">256GB</button>
                                <button class="storage-btn" data-storage="512GB">512GB</button>
                                <button class="storage-btn" data-storage="1TB">1TB</button>
                            </div>
                        </div>
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-primary btn-large" onclick="addToCart()">加入购物车</button>
                        <button class="btn btn-secondary btn-large" onclick="buyNow()">立即购买</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 华为商城. 保留所有权利.</p>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>

2.5 全局技术实现

**CSS样式系统（style.css）：**

  • 采用模块化的CSS组织方式，按功能和组件划分样式

  • 实现了统一的颜色系统和排版规范

  • 应用了现代CSS特性如Flexbox、CSS过渡、阴影效果等

  • 构建了可复用的UI组件（按钮、表单、导航等）

  • 支持响应式设计和交互状态变化
    **JavaScript功能模块（script.js）：**

  • 采用事件驱动的编程模式

  • 实现了导航菜单、轮播图、表单验证、商品选项等多个功能模块

  • 使用DOM操作和事件监听器处理用户交互

  • 包含表单验证逻辑，确保数据输入的合法性

  • 实现了页面滚动效果和动态UI更新功能

相关推荐
一枚前端小能手2 小时前
🏷️ HTML 属性参考 - 常用与全局属性的行为、兼容性与最佳实践
前端·javascript·html
付十一2 小时前
更新！Figma MCP + Cursor：大前端时代的UI到代码自动化
android·前端·ai编程
万岳科技程序员小金2 小时前
多端统一的教育系统源码开发详解：Web、小程序与APP的无缝融合
前端·小程序·软件开发·app开发·在线教育系统源码·教育培训app开发·教育培训小程序
软件架构师-叶秋2 小时前
Vue3+tyepescript+ElementPlus+Axios前端技术栈
前端·vue3·elementplus
AAA阿giao2 小时前
HTML/CSS/JS 页面渲染机制：揭秘浏览器如何将平凡代码点化为视觉魔法
前端·css·html
lichenyang4532 小时前
从零到一：编写一个简单的 Umi 插件并发布到 npm
前端·react.js·前端框架
一颗宁檬不酸2 小时前
ajxa实例操作
前端·ajax·api
文心快码BaiduComate2 小时前
CCF程序员大会码力全开：AI加速营，10w奖金等你拿！
前端·后端·程序员
前端西瓜哥2 小时前
Figma 协同编辑是如何做用户状态同步的？
前端
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件04Linux下V2Ray安装配置指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06BongoCat - 跨平台键盘猫动画工具07Labelme从安装到标注：零基础完整指南08《大数据技术原理与应用》实验报告三 熟悉HBase常用操作09智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践10看了下昨日泄露的苹果 App Store 源码……