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

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

news 2025/11/12 6:50:01

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

1. 主题总结

2. 页面分析与技术实现

2.1 首页（index.html）

2.2 登录页面（login.html）

2.3 注册页面（register.html）

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

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"><!-- 头部导航 --><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 active">注册</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="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>