web京东商城前端项目4页面
源码获取魏:RACXDX 支持要求定制文档编写
目录
1. 主题总结
2. 页面技术分析
2.1 首页(index.html)
2.2 登录页面(login.html)
2.3 注册页面(register.html)
2.4 商品详情页(product.html)
3. 通用技术亮点
3.1 响应式设计
3.2 本地存储集成
3.3 模块化JavaScript
3.4 视觉设计
1. 主题总结
本项目是一个基于前端技术栈开发的京东商城模拟网站,包含完整的电商网站核心功能模块。项目采用现代化的前端开发技术和设计理念,打造了一个视觉效果精美、交互体验流畅、功能完善的电商平台前端界面。
项目以京东商城为参考,实现了首页展示、商品详情、用户登录注册等核心业务流程,同时注重代码结构的合理性和可维护性,为后续功能扩展提供了良好的基础。
2. 页面技术分析
2.1 首页(index.html)

**技术实现:**
- HTML5语义化布局,使用header、nav、main、section、footer等标签
- CSS3 Flexbox和Grid布局系统,实现响应式页面结构
- 自定义CSS动画效果和过渡,提升用户交互体验
- 模块化设计,将页面划分为多个功能区块
- JavaScript实现的导航交互和购物车功能
**涵盖内容:**
- 顶部导航栏与搜索功能
- 商品分类导航
- 促销活动卡片展示
- 轮播图展示
- 推荐模块区域(国家补贴、企业会员、京东直播等)
- 热门商品展示
- 登录/欢迎卡片
- 底部推荐标签
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="images/1.png" type="image/png"><title>京东商城 - 首页</title><link rel="stylesheet" href="css/style.css">
</head>
<body><!-- 顶部导航栏 --><header class="header"><div class="header-top-container"><div class="logo"><a href="index.html">京东商城</a></div><div class="search-bar"><input type="text" placeholder="搜索商品/店铺" class="search-input"><button class="search-button">搜索</button></div><div class="header-right"><div class="jd-ai"><button>京东AI</button></div><div class="sign-in"><img src="images/1.png" alt="签到" class="sign-in-icon"><span>天天签到<br>领京豆</span></div></div></div><!-- 主导航菜单,作为独立的第二行 --><nav class="main-nav-bottom"><ul class="nav-list"><li class="nav-item"><a href="#" class="nav-link">首页</a></li><li class="nav-item has-submenu"><a href="#" class="nav-link">商品分类</a><ul class="submenu"><li><a href="#">手机数码</a></li><li><a href="#">电脑办公</a></li><li><a href="#">家用电器</a></li><li><a href="#">服装鞋包</a></li></ul></li><li class="nav-item"><a href="#" class="nav-link">购物车</a></li><li class="nav-item"><a href="login.html" class="nav-link">登录</a></li><li class="nav-item"><a href="register.html" class="nav-link">注册</a></li></ul></nav></header><!-- 二级促销导航/热门搜索词 --><section class="secondary-nav"><div class="secondary-nav-container"><ul class="secondary-nav-list"><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></div></section><!-- 顶部促销小卡片区域 --><section class="top-promo-cards"><div class="top-promo-container"><div class="promo-card-item"><img src="images/9.png" alt="抢购" class="promo-card-img"><p class="promo-card-title">限时抢好物</p></div><div class="promo-card-item"><img src="images/4.png" alt="补贴" class="promo-card-img"><p class="promo-card-title">国家补贴15%</p></div><div class="promo-card-item"><img src="images/5.png" alt="满减" class="promo-card-img"><p class="promo-card-title">满300减130</p></div><div class="promo-card-item"><img src="images/6.png" alt="满减" class="promo-card-img"><p class="promo-card-title">每满200减30</p></div><div class="promo-card-item"><img src="images/2.png" alt="优惠" class="promo-card-img"><p class="promo-card-title">抢1元玻璃水</p></div><div class="promo-card-item"><img src="images/14.png" alt="爆款" class="promo-card-img"><p class="promo-card-title">爆款直降</p></div></div></section><!-- 主要内容区域 --><main class="main-content"><div class="main-layout"><!-- 左侧商品分类导航 --><aside class="category-sidebar"><ul class="category-list"><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><li><a href="#">男鞋 / 运动 / 户外</a></li><li><a href="#">房产 / 汽车 / 汽车用品</a></li><li><a href="#">母婴 / 玩具乐器</a></li><li><a href="#">食品 / 酒类 / 生鲜 / 特产</a></li></ul></aside><!-- 右侧主内容区 --><div class="main-section"><!-- 轮播图区域 (保持不变或移动到此处) --><section class="banner"><div class="banner-container"><img src="images/13.png" alt="banner" class="banner-img"></div></section><!-- 推荐模块区域 --><section class="recommend-modules"><div class="module-grid"><!-- 例如: 国家补贴 x 百亿补贴 --><div class="module-card large"><h3 class="module-title">国家补贴 x 百亿补贴</h3><div class="module-content"><div class="product-item"><img src="images/10.png" alt="商品" class="product-img"><p class="price">¥6333</p></div><div class="product-item"><img src="images/11.png" alt="商品" class="product-img"><p class="price">¥3428</p></div><div class="product-item"><img src="images/12.png" alt="商品" class="product-img"><p class="price">¥1800</p></div></div></div><!-- 京东助力企业 --><div class="module-card medium"><h3 class="module-title">京东助力企业</h3><p class="subtitle">出口转内销</p><p class="sub-subtitle">又好又便宜</p><img src="images/16.png" alt="推广图" class="promo-image"></div><!-- 企业会员 --><div class="module-card small"><h3 class="module-title">企业会员</h3><ul class="feature-list"><li>多买优惠</li><li>41天账期</li><li>多档补贴</li></ul><img src="images/15.png" alt="商品" class="product-img"><p class="price">¥13999</p></div><!-- 京东直播 --><div class="module-card small"><h3 class="module-title">京东直播</h3><img src="images/17.png" alt="直播" class="product-img"><p class="product-name">剑南春</p></div><!-- 京东秒杀 --><div class="module-card small"><h3 class="module-title">京东秒杀</h3><div class="module-content"><div class="product-item"><img src="images/18.png" alt="商品" class="product-img"><p class="price">¥33.89</p></div><div class="product-item"><img src="images/19.png" alt="商品" class="product-img"><p class="price">¥4.98</p></div></div></div><!-- 9.9包邮 --><div class="module-card small"><h3 class="module-title">9.9包邮</h3><img src="images/20.png" alt="商品" class="product-img"><p class="price">¥6.9</p></div></div></section><!-- 登录/欢迎卡片 --><aside class="welcome-card"><div class="card-header"><img src="images/3.png" alt="头像" class="avatar"><span>Hi~晚上好</span></div><p>登录京东后享更多优惠</p><button class="login-btn">立即登录</button><a href="register.html" class="register-link">注册 ></a><div class="utility-links"><a href="#">享优惠</a><a href="#">赚京豆</a><a href="#">抽¥50</a><a href="#">购卡返</a></div><div class="icon-links"><div class="icon-item"><img src="images/30.png" alt="" class="icon"><span>生鲜馆</span></div><div class="icon-item"><img src="images/32.png" alt="" class="icon"><span>加油卡</span></div><div class="icon-item"><img src="images/31.png" alt="" class="icon"><span>游戏电竞</span></div><div class="icon-item"><img src="images/29.png" alt="" class="icon"><span>京东奢品</span></div></div></aside></div></div><!-- 商品展示区域 (原有部分,可保留或调整) --><section class="products"><h2 class="section-title">热门商品</h2><div class="product-grid"><div class="product-card"><a href="product.html"><img src="images/22.png" alt="商品图片" class="product-img"><h3 class="product-title">商品名称</h3><p class="product-price">¥299.00</p></a></div><div class="product-card"><a href="product.html"><img src="images/26.png" alt="商品图片" class="product-img"><h3 class="product-title">商品名称</h3><p class="product-price">¥199.00</p></a></div><div class="product-card"><a href="product.html"><img src="images/27.png" alt="商品图片" class="product-img"><h3 class="product-title">商品名称</h3><p class="product-price">¥399.00</p></a></div><div class="product-card"><a href="product.html"><img src="images/28.png" alt="商品图片" class="product-img"><h3 class="product-title">商品名称</h3><p class="product-price">¥499.00</p></a></div></div></section></main><!-- 底部推荐标签 --><section class="bottom-tags"><div class="tags-container"><a href="#" class="tag-item active">为你推荐</a><a href="#" class="tag-item">潮电好物</a><a href="#" class="tag-item">居家优品</a><a href="#" class="tag-item">百货生鲜</a><a href="#" class="tag-item">服饰美妆</a><a href="#" class="tag-item">进口好物</a></div></section><!-- 页脚 --><footer class="footer"><div class="footer-container"><p>©京东商城. All rights reserved.</p></div></footer><script src="js/main.js"></script>
</body>
</html>
2.2 登录页面(login.html)

**技术实现:**
- 表单设计与验证
- 内嵌CSS样式,实现表单的美观布局
- JavaScript表单提交处理
- 响应式表单设计,适配移动端
**涵盖内容:**
- 用户名和密码输入表单
- 表单验证功能
- 登录按钮与事件处理
- 注册账号和忘记密码链接
- 成功登录后的页面跳转逻辑
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="images/1.png" type="image/png"><title>京东商城 - 登录</title><link rel="stylesheet" href="css/style.css"><style>.login-container {max-width: 400px;margin: 100px auto;padding: 20px;background: #fff;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.login-title {text-align: center;margin-bottom: 30px;color: #333;}.form-group {margin-bottom: 20px;}.form-group label {display: block;margin-bottom: 5px;color: #666;}.form-group input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;font-size: 16px;}.form-group input:focus {outline: none;border-color: #e1251b;}.login-btn {width: 100%;padding: 12px;background-color: #e1251b;color: #fff;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;transition: background-color 0.3s;}.login-btn:hover {background-color: #c81c16;}.login-links {margin-top: 20px;text-align: center;}.login-links a {color: #666;margin: 0 10px;}.login-links a:hover {color: #e1251b;}</style>
</head>
<body><header class="header"><div class="header-top-container"><div class="logo"><a href="index.html">京东商城</a></div><div class="search-bar"><input type="text" class="search-input" placeholder="搜索商品"><button class="search-btn">搜索</button></div><div class="header-right"><a href="register.html" class="register-link">注册</a></div></div><nav class="main-nav-bottom"><ul class="nav-list"><li class="nav-item"><a href="index.html">首页</a></li><li class="nav-item"><a href="#">购物车</a></li><li class="nav-item"><a href="#">我的京东</a></li><li class="nav-item"><a href="#">客户服务</a></li></ul></nav></header><main class="main-content"><div class="login-container"><h2 class="login-title">用户登录</h2><form id="loginForm" onsubmit="return handleLogin(event)"><div class="form-group"><label for="username">用户名</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">密码</label><input type="password" id="password" name="password" required></div><button type="submit" class="login-btn">登录</button><div class="login-links"><a href="register.html">注册账号</a><a href="#">忘记密码?</a></div></form></div></main><footer class="footer"><div class="footer-container"><p>©京东商城. All rights reserved.</p></div></footer><script>function handleLogin(event) {event.preventDefault();const username = document.getElementById('username').value;const password = document.getElementById('password').value;// 这里可以添加实际的登录逻辑console.log('登录信息:', { username, password });alert('登录成功!');window.location.href = 'index.html';}</script>
</body>
</html>
2.3 注册页面(register.html)

**技术实现:**
- 复杂表单设计与多字段验证
- 实时表单验证反馈
- 正则表达式验证邮箱格式
- 密码一致性检查
- 错误提示信息展示
**涵盖内容:**
- 用户信息注册表单(用户名、邮箱、密码、确认密码)
- 详细的表单验证规则
- 动态错误提示
- 注册成功后的处理逻辑
- 已有账号快速登录入口
注册页面实现了全面的表单验证机制,确保用户输入的数据符合规范,同时提供清晰的错误提示,帮助用户完成注册流程。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="images/1.png" type="image/png"><title>京东商城 - 注册</title><link rel="stylesheet" href="css/style.css"><style>.register-container {max-width: 400px;margin: 100px auto;padding: 20px;background: #fff;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.register-title {text-align: center;margin-bottom: 30px;color: #333;}.form-group {margin-bottom: 20px;}.form-group label {display: block;margin-bottom: 5px;color: #666;}.form-group input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;font-size: 16px;}.form-group input:focus {outline: none;border-color: #e1251b;}.register-btn {width: 100%;padding: 12px;background-color: #e1251b;color: #fff;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;transition: background-color 0.3s;}.register-btn:hover {background-color: #c81c16;}.register-links {margin-top: 20px;text-align: center;}.register-links a {color: #666;}.register-links a:hover {color: #e1251b;}.error-message {color: #e1251b;font-size: 14px;margin-top: 5px;display: none;}</style>
</head>
<body><header class="header"><div class="header-top-container"><div class="logo"><a href="index.html">京东商城</a></div><div class="search-bar"><input type="text" class="search-input" placeholder="搜索商品"><button class="search-btn">搜索</button></div><div class="header-right"><a href="login.html" class="login-link">登录</a></div></div><nav class="main-nav-bottom"><ul class="nav-list"><li class="nav-item"><a href="index.html">首页</a></li><li class="nav-item"><a href="#">购物车</a></li><li class="nav-item"><a href="#">我的京东</a></li><li class="nav-item"><a href="#">客户服务</a></li></ul></nav></header><main class="main-content"><div class="register-container"><h2 class="register-title">用户注册</h2><form id="registerForm" onsubmit="return handleRegister(event)"><div class="form-group"><label for="username">用户名</label><input type="text" id="username" name="username" required><div class="error-message" id="username-error"></div></div><div class="form-group"><label for="email">电子邮箱</label><input type="email" id="email" name="email" required><div class="error-message" id="email-error"></div></div><div class="form-group"><label for="password">密码</label><input type="password" id="password" name="password" required><div class="error-message" id="password-error"></div></div><div class="form-group"><label for="confirm-password">确认密码</label><input type="password" id="confirm-password" name="confirm-password" required><div class="error-message" id="confirm-password-error"></div></div><button type="submit" class="register-btn">注册</button><div class="register-links"><p>已有账号?<a href="login.html">立即登录</a></p></div></form></div></main><footer class="footer"><div class="footer-container"><p>©京东商城. All rights reserved.</p></div></footer><script>function validateForm() {let isValid = true;const username = document.getElementById('username').value;const email = document.getElementById('email').value;const password = document.getElementById('password').value;const confirmPassword = document.getElementById('confirm-password').value;// 重置错误信息document.querySelectorAll('.error-message').forEach(el => el.style.display = 'none');// 验证用户名if (username.length < 3) {document.getElementById('username-error').textContent = '用户名至少需要3个字符';document.getElementById('username-error').style.display = 'block';isValid = false;}// 验证邮箱const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (!emailRegex.test(email)) {document.getElementById('email-error').textContent = '请输入有效的电子邮箱地址';document.getElementById('email-error').style.display = 'block';isValid = false;}// 验证密码if (password.length < 6) {document.getElementById('password-error').textContent = '密码至少需要6个字符';document.getElementById('password-error').style.display = 'block';isValid = false;}// 验证确认密码if (password !== confirmPassword) {document.getElementById('confirm-password-error').textContent = '两次输入的密码不一致';document.getElementById('confirm-password-error').style.display = 'block';isValid = false;}return isValid;}function handleRegister(event) {event.preventDefault();if (validateForm()) {const formData = {username: document.getElementById('username').value,email: document.getElementById('email').value,password: document.getElementById('password').value};// 这里可以添加实际的注册逻辑console.log('注册信息:', formData);alert('注册成功!');window.location.href = 'login.html';}}</script>
</body>
</html>
2.4 商品详情页(product.html)

**技术实现:**
- 产品图片画廊与缩略图切换
- 数量选择器组件
- 添加到购物车功能
- 响应式布局,适配不同屏幕尺寸
- JavaScript交互功能实现
**涵盖内容:**
- 商品主图与缩略图展示
- 商品名称、价格、描述信息
- 商品数量选择器
- 加入购物车功能
- 商品详细信息展示(商品编号、分类、品牌等)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="images/1.png" type="image/png"><title>京东商城 - 商品详情</title><link rel="stylesheet" href="css/style.css"><style>.product-detail {max-width: 1200px;margin: 80px auto 20px;padding: 20px;display: grid;grid-template-columns: 1fr 1fr;gap: 40px;}.product-gallery {position: relative;}.main-image {width: 100%;height: 400px;object-fit: cover;border-radius: 8px;margin-bottom: 20px;}.thumbnail-list {display: flex;gap: 10px;}.thumbnail {width: 80px;height: 80px;object-fit: cover;border-radius: 4px;cursor: pointer;border: 2px solid transparent;transition: border-color 0.3s;}.thumbnail:hover,.thumbnail.active {border-color: #e1251b;}.product-info {padding: 20px;}.product-name {font-size: 24px;margin-bottom: 20px;color: #333;}.product-price {font-size: 28px;color: #e1251b;margin-bottom: 20px;}.product-description {color: #666;margin-bottom: 30px;line-height: 1.6;}.product-actions {display: flex;gap: 20px;margin-bottom: 30px;}.quantity-selector {display: flex;align-items: center;gap: 10px;}.quantity-btn {width: 30px;height: 30px;border: 1px solid #ddd;background: #fff;cursor: pointer;font-size: 18px;display: flex;align-items: center;justify-content: center;}.quantity-input {width: 50px;height: 30px;text-align: center;border: 1px solid #ddd;}.add-to-cart {padding: 12px 30px;background-color: #e1251b;color: #fff;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;transition: background-color 0.3s;}.add-to-cart:hover {background-color: #c81c16;}.product-meta {border-top: 1px solid #eee;padding-top: 20px;}.meta-item {display: flex;margin-bottom: 10px;color: #666;}.meta-label {width: 100px;color: #999;}@media (max-width: 768px) {.product-detail {grid-template-columns: 1fr;gap: 20px;}.main-image {height: 300px;}.product-actions {flex-direction: column;}.add-to-cart {width: 100%;}}</style>
</head>
<body><header class="header"><div class="header-top-container"><div class="logo"><a href="index.html">京东商城</a></div><div class="search-bar"><input type="text" class="search-input" placeholder="搜索商品"><button class="search-btn">搜索</button></div><div class="header-right"><a href="#" class="header-link">京东AI</a><a href="#" class="header-link">签到领京豆</a><a href="login.html" class="login-link">登录</a><a href="register.html" class="register-link">注册</a></div></div><nav class="main-nav-bottom"><ul class="nav-list"><li class="nav-item"><a href="index.html">首页</a></li><li class="nav-item"><a href="#">购物车</a></li><li class="nav-item"><a href="#">我的京东</a></li><li class="nav-item"><a href="#">客户服务</a></li><li class="nav-item"><a href="#">企业采购</a></li><li class="nav-item"><a href="#">企业服务</a></li></ul></nav></header><main class="main-content"><div class="product-detail"><div class="product-gallery"><img src="images/22.png" alt="商品主图" class="main-image" id="mainImage"><div class="thumbnail-list"><img src="images/21.png" alt="缩略图1" class="thumbnail active" onclick="changeImage(this)"><img src="images/23.png" alt="缩略图2" class="thumbnail" onclick="changeImage(this)"><img src="images/24.png" alt="缩略图3" class="thumbnail" onclick="changeImage(this)"><img src="images/25.png" alt="缩略图4" class="thumbnail" onclick="changeImage(this)"></div></div><div class="product-info"><h1 class="product-name">商品名称</h1><div class="product-price">¥299.00</div><p class="product-description">这是一段商品描述文字,详细介绍商品的特点、规格、材质等信息。商品描述应该包含足够的信息,帮助用户了解商品的具体情况。</p><div class="product-actions"><div class="quantity-selector"><button class="quantity-btn" onclick="updateQuantity(-1)">-</button><input type="number" class="quantity-input" value="1" min="1" id="quantity"><button class="quantity-btn" onclick="updateQuantity(1)">+</button></div><button class="add-to-cart" onclick="addToCart()">加入购物车</button></div><div class="product-meta"><div class="meta-item"><span class="meta-label">商品编号:</span><span>123456789</span></div><div class="meta-item"><span class="meta-label">商品分类:</span><span>电子产品</span></div><div class="meta-item"><span class="meta-label">商品品牌:</span><span>示例品牌</span></div></div></div></div></main><footer class="footer"><div class="footer-container"><p>©京东商城. All rights reserved.</p></div></footer><script>function changeImage(thumbnail) {// 更新主图document.getElementById('mainImage').src = thumbnail.src;// 更新缩略图选中状态document.querySelectorAll('.thumbnail').forEach(thumb => {thumb.classList.remove('active');});thumbnail.classList.add('active');}function updateQuantity(change) {const input = document.getElementById('quantity');const newValue = parseInt(input.value) + change;if (newValue >= 1) {input.value = newValue;}}function addToCart() {const quantity = document.getElementById('quantity').value;alert(`已添加 ${quantity} 件商品到购物车!`);}</script>
</body>
</html>
3. 通用技术亮点
3.1 响应式设计
项目采用了响应式设计原则,通过媒体查询和弹性布局,确保网站在不同屏幕尺寸下都能提供良好的用户体验。特别是在移动端,导航菜单、商品布局等元素都会自动调整以适应小屏幕。
3.2 本地存储集成
项目利用localStorage实现了购物车数据的本地存储,用户可以在不刷新页面的情况下添加和管理商品,提升了交互体验。
3.3 模块化JavaScript
JavaScript代码采用了模块化的设计思想,将不同功能封装为独立函数,如导航初始化、购物车管理、表单验证等,提高了代码的可维护性和复用性。
3.4 视觉设计
项目在视觉设计上参考了京东商城的品牌风格,采用了红色为主色调,搭配白色和灰色作为辅助色,营造出专业、现代的电商氛围。同时,通过阴影、圆角、过渡动画等效果,增强了界面的层次感和交互反馈。
