文章目录
- 前言
- 一、登录页
- 二、首页
- 三、我的购物车页
- 四、我的订单页
- 五、确认订单页
- 六、详情页
- 七、整体结构和效果图
- 总结
前言
仿小米商城官网项目是本人实训内容，实训老师带着做的首页和登录页，本人在此基础上加入了我的购物车页，我的订单页，确认订单页以及详情页。此项目是学习html+css+js以来第一个比较完整的项目练习，知识都很基础，不是很难，用心学是会学会的。本人从中学到了很多关键且使用的技术。
一、登录页
用户通过输入账号密码进行登录，此次项目测试账号：admin 测试密码：123123，以下是登录页面实现登陆操作的代码：
<script> function fun() { /* 1.如果账号等于：admin 2.并且密码等于：123123 if(登录成功){ 跳转到首页页面 }else{ 警告 } */ //获取用户名 var user = document.querySelector(".username").value; // 获取密码 var pass = document.querySelector(".password").value; //如果账号等于：admin,并且密码等于：123123 if (user == "admin" && pass == "123123") { alert("登录成功"); // 跳转到首页 location.href = "./index.html" } else { alert("账号或密码错误"); } } </script> 登录页面设计如下所示：
登录页html代码如下所示：
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米账号-登录</title> <link rel="icon" href="./images/favicon/favicon.ico"> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/login.css"></head><body> <div class="wrap"> <div class="wrap_bg"></div> <div class="login"> <div class="login_hd"> <div class="hd_left"> <img src="./images/logo-mi2.png" class="logo"> 小米帐号 </div> <ul class="hd_right"> <li><a href="#">用户协议</a></li> <li><a href="#">隐私政策</a></li> <li><a href="#">帮助中心</a></li> <li><a href="#">中文(简体)</a></li> </ul> </div> <div class="login_box"> <div class="login_card"> <img src="./images/two.png" class="two"> <h2 class="title">登录</h2> <div class="user_box"> <div class="user"> <input type="text" id="u" class="username"> <label for="u">邮箱/手机号码/小米ID</label> </div> <div class="user_msg">请输入账号</div> </div> <div class="user_box"> <div class="user"> <input type="password" id="u" class="password"> <label for="u">密码</label> </div> <div class="user_msg">请输入密码</div> </div> <button class="login_btn" onclick="fun()">登录</button> <div class="login_other"> <a href="#" class="l_l">忘记密码？</a> <a href="#" class="l_right">手机号登录</a> </div> <div class="login_method"> <h3>其他登录方式</h3> <div class="method_list"> <a href="#"><img src="./images/qq.png" alt=""></a> <a href="#"><img src="./images/wx1.png" alt=""></a> <a href="#"><img src="./images/sina.png" alt=""></a> </div> </div> </div> </div> </div> </div> <script> function fun() { /* 1.如果账号等于：admin 2.并且密码等于：123123 if(登录成功){ 跳转到首页页面 }else{ 警告 } */ //获取用户名 var user = document.querySelector(".username").value; // 获取密码 var pass = document.querySelector(".password").value; //如果账号等于：admin,并且密码等于：123123 if (user == "admin" && pass == "123123") { alert("登录成功"); // 跳转到首页 location.href = "./index.html" } else { alert("账号或密码错误"); } } </script> </body></html>登录页css代码如下所示：
body { font-family: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-variant: tabular-nums; font-feature-settings: "tnum", "tnum";}/* 媒体查询设置不同屏幕下左边背景的宽度*/@media screen and (min-width:1000px) { .wrap_bg { width: 200px; }}@media screen and (min-width:1200px) { .wrap_bg { width: 375px; }}.wrap { /* 给父级元素设置弹性盒，两个块还一行显示 */ display: flex;}.wrap_bg { height: 100vh; /* 设置背景图片 */ background-image: url("../images/bg.jpg"); /* 缩放图片适应容器 */ background-size: cover; /* 图片居中 */ background-position: 50%;}.login { /* 占用弹性盒父元素的剩余空间 */ flex-grow: 1; height: 100vh;}/* ---------------标题------------------- */.login_hd { height: 40px; padding: 20px;}/* 左 */.hd_left { float: left; font-size: 26px; color: #333; font-weight: 500;}.hd_left .logo { width: 40px; height: 40px;}/* 右 */.hd_right { float: right; margin-right: 20px;}.hd_right li { float: left; line-height: 40px; margin: 0 10px;}.hd_right li a { color: #838383;}.hd_right li:hover a { color: #ff6700;}/* -------------登录主体内容------------ */.login_box { padding-top: 20px;}.login_card { width: 360px; padding: 40px 45px; /* 盒子居中显示 */ margin: 0 auto; /* 阴影 */ box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%); position: relative; /* 添加圆角 */ border-radius: 4;}/* -----标题------- */.login_card .title { display: inline-block; color: #333; font: bold 24px/40px "黑体"; border-bottom: 4px solid #ff6700;}/* 二维码 */.login_card .two { position: absolute; right: 0px; top: 0;}/* ------输入框和密码框------- */.user_box { margin-top: 20px;}.user { width: 354px; height: 60px; /* 设置怪异盒模型 */ box-sizing: border-box; background: #fcf2f3; /* 设置圆角 */ border-radius: 4px; position: relative;}.user label{ color: #f04645; font-weight: 400; font-size: 17px; position: absolute; left:15px; top:20px; /* 添加过渡效果 */ transition: 0.5s;}.user input{ width: 80%; height: 30px; margin-top:25px; margin-left: 15px; /* 去除input的边框 */ border: none; /* 去除input的轮廓线 */ outline: none; /* */ font-size: 20px; background: none;}/* ----光标进入input，让文字小点，位置靠上一点 */.user input:focus+label{ font-size: 12px; top:8px}.user_box .user_msg{ font-size:12px; color: #f04645; margin: 10px auto 20px;}.login_btn{ width: 354px; height: 60px; background: #ff5c00; text-align: center; font:bold 18px/60px "黑体"; /* 去除边框 */ border: none; color:#fff; opacity: .4; border-radius: 4px;}/* 登录说明 */.login_other{ line-height: 50px; }.login_other a{ color: #ff5c00; font-size: 16px;}.login_other .l_right{ float: right;}/*------- 登录方式 ------ */.login_method{ margin-top: 20px; text-align: center;}/* 标题 */.login_method h3{ font-size: 17px; color:#aaa; line-height: 40px;}.method_list a{ display: inline-block; margin: 0 10px;}.method_list img{ width: 40px; height: 40px;}二、首页
首页主要是轮播图的设计与实现（可手动轮播，也可以自动轮播），商品列表以及商品展示，浮动与按压效果是实现，此外还设计了视频专栏，小米秒杀专栏，下载app弹出窗和购物车弹出窗设计。
点击导航栏购物车，或者点击工具条上的购物车可跳转到我的购物车页面，点击登录跳转到登录页，还有回到顶部效果的实现。以下是首页效果图：
首页部分代码如下：
<a href="#" id="j-app" class="topbar-download"> 下载app <div class="appcode"> <img src="images/download.png" alt="小米商城" width="90" height="90"> 小米商城app </div> </a> <div class="site-shop fr"> <a href="./cart.html" class="cart"> <em class="iconfont"></em>购物车 <span class="J-sp"> (0) </span> </a> <div class="j-menu"> 购物车中还没有商品，赶紧选购吧！ </div> </div> <div class="home-tool-bar"> <a href="#" class="item"> <div class="icon"> <img src="images/tool-1.png" alt="" class="static"><img src="images/tool-01.png" alt="" class="hover"> </div> <span class="text">手机APP</span> <div class="pop-content"> <img src="images/APP.png" alt=""> <span class="desc"> 扫码领取新人百元礼包 </span> </div> </a> <a href="#" class="item"> <div class="icon"> <img src="images/tool-2.png" alt="" class="static"><img src="images/tool-02.png" alt="" class="hover"> </div> <span class="text">个人中心</span> </a> <a href="#" class="item"> <div class="icon"> <img src="images/tool-3.png" alt="" class="static"><img src="images/tool-03.png" alt="" class="hover"> </div> <span class="text">售后服务</span> </a> <a href="#" class="item"> <div class="icon"><img src="images/tool-4.png" alt="" class="static"><img src="images/tool-04.png" alt="" class="hover"></div> <span class="text">人工客服</span> </a> <a href="./cart.html" class="item"> <div class="icon"><img src="images/tool-5.png" alt="" class="static"><img src="images/tool-05.png" alt="" class="hover"></div> <span class="text">购物车</span> </a> <a href="#" class="item backtop" id="J_atop"> <div class="icon"> <img src="images/totop.png" alt="" class="static"><img src="images/totop_hover.png" alt="" class="hover"> </div> <span class="text">回顶部</span> </a> </div>function getStyle(obj, name) { //name传字符串 if (window.getComputedStyle) { //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj, null)[name]; } else { //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; }}function move(obj, attr, target, speed, callback) { //关闭上一个定时器 clearInterval(obj.timer); //获取元素目前的位置 var current = parseInt(getStyle(obj, attr)); if (current > target) { speed = -speed; } obj.timer = setInterval(function() { //获取box原来的left值 var oldValue = parseInt(getStyle(obj, attr)); //在旧值得基础上增加 var newValue = oldValue + speed; if (speed < 0 && newValue < target || speed > 0 && newValue > target) { newValue = target; } //将新值设置给box obj.style[attr] = newValue + "px"; //当元素移动到执行动画目标时，使其停止执行动画 if (newValue == target) { clearInterval(obj.timer); //动画执行完毕，调用回调函数 //有callback执行，没有的话不执行 这样参数可不写 callback && callback(); } }, 30);}//小米秒杀var swiper_slide = document.querySelectorAll(".swiper-slide"), swiper_wrapper = document.querySelector(".swiper-wrapper"), btn_left = document.querySelector(".swiper-controls .swiper-flashsale-prev"), btn_right = document.querySelector(".swiper-controls .swiper-flashsale-next"), iNow = 0, //记录当前位置，每4个一组 count = Math.ceil(13 / 4) - 1, //最大位置下标 timers = null;//动态生成ul的宽var swiperLiWidth = swiper_slide[0].offsetWidth + 14;swiper_wrapper.style.width = swiperLiWidth * (swiper_slide.length + 1) + "px";//启动定时器，自己进行滚动timers = setInterval(function() { iNow++; if (iNow > count) { iNow = 0; } tab(); // console.log(iNow);}, 5000);btn_right.onclick = function() { clearInterval(timers); iNow++; // 设置index的范围 iNow = iNow >= count " />window.onscroll = function() { scrollFun() };function scrollFun() { if (document.body.scrollTop > 854 || document.documentElement.scrollTop > 854) { J_atop.classList.add("active"); } else { J_atop.classList.remove("active"); }}//这里定义返回底部的方法function topFun() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0;}//点击返回顶部J_atop.onclick = function() { topFun();}function tabS(obj) { var tabWrap = document.querySelector(obj); var tabList = tabWrap.querySelectorAll(".tab-list li"); var tabUl = tabWrap.querySelectorAll(".brick-list"); tabList[0].classList.add("tab-active"); for (var i = 0; i < tabList.length; i++) { tabList[i].num = i; tabList[i].onmouseover = function() { for (var i = 0; i < tabList.length; i++) { tabList[i].className = ""; } tabList[this.num].classList.add("tab-active"); for (var j = 0; j < tabUl.length; j++) { tabUl[j].classList.add("hide"); } tabUl[this.num].classList.remove("hide"); } }}tabS(".home-appliances-box");tabS(".home-ability-box");tabS(".home-match-box");tabS(".home-mountings-box");tabS(".home-rim-box");三、我的购物车页
在我的购物车页面，点击我的订单可以跳转到我的订单页面，可以对商品进行选择，数量的加减以及去结算跳转到确认订单页面。基本页面效果如下所示：
我的购物车页部分代码：
<html lang="en"><head> <title>小米商城</title> <meta charset="utf-8"> <link rel="shortcut icon" type="image/x-icon" href="./images/favicon/favicon.ico" /> <link rel="stylesheet" href="./css/cart.css"> <link rel="stylesheet" type="text/css" href="./css/content.css"> <link rel="stylesheet" href="./css/footer1.css"> <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css"> <script src="./js/jq_3.3.1_mi.js"></script> <script src="./js/cart.js"></script></head><body> <div class="header"> <div class="content"> <div class="content-left"> <a href="" class="logo"></a> <h1 class="title">我的购物车</h1> <h6 class="notice">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</h6> </div> <div class="content-right"> <div class="userinfo"> <div class="username"> <a href="javascript:void(0)" class="toUserInfo">我是刘子祎</a> <ul> <li class="infoitem">个人中心</li> <li class="infoitem">评价晒单</li> <li class="infoitem">我的喜欢</li> <li class="infoitem">小米账户</li> <li class="infoitem">退出登录</li> </ul> </div> <i class="fa fa-angle-down fa-1x"></i> </div> <div class="toOrderDetail"><a href="./order.html">我的订单</a></div> </div> </div> </div> <div class="trunk"> <div class="cart"> <div class="list list-title"> <div class="select select-all"><i class="fa fa-check" id="check-all"></i>全选</div> <div class="good-img"></div> <div class="good-name" style="font-size:14px; ">商品名称</div> <div class="good-price">单价</div> <div class="good-num">数量</div> 小计</div> <div class="operation">操作</div> </div> <div class="list list-item"> <div class="select"><i class="fa fa-check"></i></div> <div class="good-img"><img src="./static/img/phone/phone1.png" alt=""></div> <div class="good-name"> 小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB </div> <div class="good-price">3199元</div> <div class="good-num"> <div class="num-input"> <button class="minus">-</button> <input type="text" value="1" class="num-value"> <button class="plus">+</button> </div> </div> <div class="good-total-price">3199元</div> <div class="operation"><i class="fa fa-times"></i></div> </div> <div class="list list-item"> <div class="select"><i class="fa fa-check"></i></div> <div class="good-img"><img src="./static/img/phone/phone1.png" alt=""></div> <div class="good-name"> 小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB </div> <div class="good-price">3199元</div> <div class="good-num"> <div class="num-input"> <button class="minus">-</button> <input type="text" value="1" class="num-value"> <button class="plus">+</button> </div> </div> <div class="good-total-price">3199元</div> <div class="operation"><i class="fa fa-times"></i></div> </div> <div class="list list-item"> <div class="select"><i class="fa fa-check"></i></div> <div class="good-img"><img src="./static/img/phone/phone1.png" alt=""></div> <div class="good-name"> 小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB </div> <div class="good-price">3199元</div> <div class="good-num"> <div class="num-input"> <button class="minus">-</button> <input type="text" value="1" class="num-value"> <button class="plus">+</button> </div> </div> <div class="good-total-price">3199元</div> <div class="operation"><i class="fa fa-times"></i></div> </div> <div class="list list-total"> <div class="list-total-left"> <span class="notice"><a href="">继续购物</a></span> <span class="statistics">共 <span class="all-count">0</span> 件商品，已选择 <span class="select-count">0</span> 件</span> </div> <div class="list-total-right"> <div class="total-price">合计: <span class="sum-price">0</span> 元</div> <a href="./close.html"><button class="submit-cart">去结算</button></a> </div> </div> </div> <div class="recommend" style="margin-top: 60px;"> <p>买购物车中商品的人还买了</p> </div> <div class="content-bottom"> <div class="content-bottom1"> <div class="content-bottom1_shop"> <div class="content-bottom1_shop1"></div> <div class="content-bottom1_shop2"> <div class="content-bottom1_1"> <div class="content-bottom1_a"> <img class="bottomImg" src="./static/img/buy/手机1.jpg" alt=""> <h3 class="bottomTitle"><a href="">小米5X 4GB+64GB </a> </h3> <p class="bottomDesc">光学变焦双摄，拍人更美</p> <p class="bottomPrice"> <span style="color:#ff6709">1499 元</span> </p> </div> <div class="content-bottom1_b"> <span class="bottomFlagRed">享八折</span> <img class="bottomImg" src="./static/img/buy/手机2.jpg" alt=""> <h3 class="bottomTitle"><a href="">小米MIX 2 全陶瓷尊享版 </a></h3> <p class="bottomDesc">全面屏2.0，Unibody 全陶瓷</p> <p class="bottomPrice"> <span style="color:#ff6709">3699元</span> <del>4699 元</del> </p> </div> <div class="content-bottom1_c"> <img class="bottomImg" src="./static/img/buy/手机3.jpg" alt=""> <h3 class="bottomTitle"><a href="">红米5A 2GB内存 </a></h3> <p class="bottomDesc">8天超长待机，137g轻巧机身</p> <p class="bottomPrice"> <span style="color:#ff6709">599元</span> </p> </div> <div class="content-bottom1_d"> <img class="bottomImg" src="./static/img/buy/手机4.jpg" alt=""> <h3 class="bottomTitle"><a href="">红米5 Plus 3GB+32GB </a></h3> <p class="bottomDesc">全面屏手机，4000mAh大电量</p> <p class="bottomPrice"> <span style="color:#ff6709">999元</span> </p> </div> </div> <div class="content-bottom1_2"> <div class="content-bottom1_e"> <img class="bottomImg" src="./static/img/buy/手机5.jpg" alt=""> <h3 class="bottomTitle"><a href="">红米S2 3GB+32GB </a></h3> <p class="bottomDesc">前置1600万超大像素智能美拍</p> <p class="bottomPrice"> <span style="color:#ff6709">999元</span> </p> </div> <div class="content-bottom1_f"> <img class="bottomImg" src="./static/img/buy/手机6.jpg" alt=""> <h3 class="bottomTitle"><a href="">小米Note 3 4GB+64GB </a></h3> <p class="bottomDesc">1600万美颜自拍，2倍变焦双摄</p> <p class="bottomPrice"> <span style="color:#ff6709">1799元</span> <del>1999元</del> </p> </div> <div class="content-bottom1_g"> <img class="bottomImg" src="./static/img/buy/手机7.jpg" alt=""> <h3 class="bottomTitle"><a href="">红米5 2GB+16GB </a></h3> <p class="bottomDesc">5.7英寸全面屏，前置柔光自拍</p> <p class="bottomPrice"> <span style="color:#ff6709">799元</span> </p> </div> <div class="content-bottom1_h"> <img class="bottomImg" src="./static/img/buy/手机8.jpg" alt=""> <h3 class="bottomTitle"><a href="">小米Max 2 4GB+64GB </a></h3> <p class="bottomDesc">6.44''大屏，5300mAh 充电宝级的大电量</p> <p class="bottomPrice"> <span style="color:#ff6709">1499元</span> <del>1699元</del> </p> </div> </div> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="footer-top"> <div class="footer-top_li"> <div class="footer-top_li_1"> <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span> <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span> <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span> <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span> <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a> </div> <span class="separate"></span> <div class="footer-top_li_2"> <div class="footer-top_li_a"> <dl> <dt>帮助中心</dt> <dd><a href="">账户管理</a></dd> <dd><a href="">购物指南</a></dd> <dd><a href="">订单操作</a></dd> </dl> <dl> <dt>服务支持</dt> <dd><a href="">售后政策</a></dd> <dd><a href="">自助服务</a></dd> <dd><a href="">相关下载</a></dd> </dl> <dl> <dt>线下门店</dt> <dd><a href="">小米之家</a></dd> <dd><a href="">服务网点</a></dd> <dd><a href="">授权体验店</a></dd> </dl> <dl> <dt>关于小米</dt> <dd><a href="">了解小米</a></dd> <dd><a href="">加入小米</a></dd> <dd><a href="">投资者关系</a></dd> </dl> <dl> <dt>关注我们</dt> <dd><a href="">新浪微博</a></dd> <dd><a href="">官网微博</a></dd> <dd><a href="">联系我们</a></dd> </dl> <dl> <dt>特色服务</dt> <dd><a href="">F码通道</a></dd> <dd><a href="">礼物码</a></dd> <dd><a href="">防伪查询</a></dd> </dl> <div class="connect"> <p class="telephone">Feir-520-1314</p> <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p> <button><span class="fa fa-commenting "></span> 联系客服</button> </div> </div> <div class="footer-top_li_b"></div> </div> </div> </div> <div class="footer-bottom"> <div class="footer-bottom_li"> <div class="footer-bottom_li_1"> <img src="https://blog.csdn.net/qq_58401483/article/details/static/img/footlogo.png" alt="" class="logoBottom"> </div> <div class="footer-bottom_li_2"> <div class="footer-bottom_li_a"> <ul> <li>小米商城<span></span></li> <li>MIUI<span></span></li> <li>米家<span></span></li> <li>米聊<span></span></li> <li>多看<span></span></li> <li>游戏<span></span></li> <li>路由器<span></span></li> <li>米粉卡<span></span></li> <li>政企服务<span></span></li> <li>小米天猫店<span></span></li> <li>隐私政策<span></span></li> <li>问题反馈<span></span></li> <li>Select Region</li> </ul> </div> <div class="footer-bottom_li_b"> <a href="">©mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2014]0059-0009号</a> <br> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </div> </div> <div class="footer-bottom_li_3"> <img src="./static/img/footericon1.png" alt="" class="icon"> <img src="./static/img/footericon2.png" alt="" class="icon"> <img src="./static/img/footericon3.png" alt="" class="icon"> <img src="./static/img/footericon4.png" alt="" class="icon"> <img src="./static/img/footericon5.png" alt="" class="icon"> </div> <div class="footer-bottom_li_4"> 探索黑科技，小米为发烧而生！ </div> </div> </div></body></html>$(function(){ //初始化总价, 总选择数, 总条数; doPrice(); //全选/选择框的鼠标移上变个颜色 $('.fa-check').mouseover(function(){ if($(this).attr('class')!='fa fa-check checked') { $(this).css('color', '#ff6a00'); } }) $('.fa-check').mouseleave(function(){ $(this).css('color','#fff'); }) //普通勾选 $('.fa-check').click(function(){ var cla=$(this).attr('class'); if(cla!='fa fa-check checked'){ $(this).attr('class','fa fa-check checked'); }else{ $(this).attr('class','fa fa-check'); } doCheckAll(); doPrice(); }) //全选框勾选 $('#check-all').click(function () { var cla=$(this).attr('class'); if(cla!='fa fa-check checked'){ $('.fa-check').attr('class','fa fa-check checked'); }else{ $('.fa-check').attr('class','fa fa-check'); } doPrice(); }) //检查是否全选 function doCheckAll(){ var allitem=$('.list-item i[class*="fa-check"]').length; var checkeditem=$('.list-item i[class$="checked"]').length; if(allitem!=checkeditem){ $('#check-all').attr('class','fa fa-check'); }else{ $('#check-all').attr('class','fa fa-check checked'); } } //加减按钮 $('button.minus').click(function(){ var nowvalue=$(this).siblings('input').val(); nowvalue=parseInt(nowvalue); var currentvalue=0; nowvalue<=1" />
我的订单页部分代码展示： <html><head> <title>我的订单—小米商城</title> <meta charset="utf-8"> <link rel="shortcut icon" type="image/x-icon" href="./images/favicon/favicon.ico" /> <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="./css/mi.css"> <link rel="stylesheet" type="text/css" href="./css/shop.css"> <link rel="stylesheet" type="text/css" href="./css/footer1.css"> <link rel="stylesheet" type="text/css" href="./font-awesome/css/font-awesome.min.css"> <script type="text/javascript" src="./layui/layui.js"></script></head><body> <div class="header"> <div class="header_menu"> <ul class="header_left"> <li><a href="./index.html">小米商城</a><span>|</span></li> <li><a href="#">MIUI</a><span>|</span></li> <li><a href="#">IOT</a><span>|</span></li> <li><a href="#">云服务</a><span>|</span></li> <li><a href="#">小爱分享平台</a><span>|</span></li> <li><a href="#">金融</a><span>|</span></li> <li><a href="#">有品</a><span>|</span></li> <li><a href="#">企业服务</a><span>|</span></li> <li><a href="#">SelectRegion</a></li> </ul> <div class="header_right"> <ul class="userinfo"> <li class="username"><a href="javascript:void(0)" class="toUserInfo">我是刘子祎<i class="fa fa-angle-down fa-1x"></i></a><span>|</span> <ul> <li class="infoitem">个人中心</li> <li class="infoitem">评价晒单</li> <li class="infoitem">我的喜欢</li> <li class="infoitem">小米账户</li> <li class="infoitem">退出登录</li> </ul> </li> <li><a href="#">消息通知</a><span>|</span></li> <li><a href="#">我的订单</a></li> <li class="header_right_li"><a href="./cart.html"><i class="fa fa-shopping-cart" ></i> 购物车 ( 0 )</a><div>购物车中还没有商品，赶紧选购吧！</div></li> </ul> </div> </div> </div> <div class="content-top"> <div class="content"> <div class="content_menu"> <div class="content_menu_pic"> 
<img src="./static/img/logoAD.gif" > </div> <div class="content_menu_ul"> <ul><li>小米手机<div class="mi_phone"><div class="mi_phone_div"><div class="mi_phone_div_1"><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone2.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone3.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div> </div> <div class="clear"></div></div> </div></div></li><li>红米<div class="mi_phone"><div class="mi_phone_div"><div class="mi_phone_div_1"><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone7.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone8.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone9.jpg"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div> </div> <div class="clear"></div></div> </div></div></li><li>电视</li><li>笔记本</li><li>盒子</li><li>新品</li><li>路由器</li><li>智能硬件</li><li>服务</li><li>社区</li></ul> </div> <div class="content-form"> <form> <input type="text" name=""> <div class="content-form-a"><a href="">电视新品</a> <a href="">618预热</a></div> <div class="botton"><i class=" fa fa-search"></i></div> </form> </div> <div class="clear"></div> </div> </div> <div class="order_content"> <div class="order"> <p style="color: #333;font-size: 13px;">首页 > 交易订单</p> <div class="order_content_div"> <div class="order_left"> <ul> <li class="box">订单中心</li> <li class="min" >我的订单</li> <li class="min">意外保</li> <li class="min">团购订单</li> <li class="min">评价晒单</li> <li class="min">话费充值订单</li> <li class="min">以旧换新订单</li> <li class="box">个人中心</li> <li class="min">我的个人中心</li> <li class="min">消息通知</li> <li class="min">购买资格</li> <li class="min">现金账户</li> <li class="min">小米礼品卡</li> <li class="min">现金券</li> <li class="min">喜欢的商品</li> <li class="min">优惠券</li> <li class="min">收货地址</li> <li class="box">售后服务</li> <li class="min">服务记录</li> <li class="min">申请服务</li> <li class="min">领取快递报销</li> <li class="box">账户管理</li> <li class="min">个人信息</li> <li class="min">修改密码</li> <li class="min">社区VIP认证</li> </ul> </div> <div class="order_right" > <p>我的订单<span style="font-size:13px;"> 请谨防钓鱼链接或诈骗电话，了解更多></span></p> <div class="order_right_form"> <ul> <li id="regTabs_0" onclick="ChangeReg('0','register_',1)">全部有效订单<span></span></li> <li id="regTabs_1" onclick="ChangeReg('1','register_',1)">待支付<span></span></li> <li>待收货<span></span></li> <li>已关闭</li> </ul> <form> <input type="text" name="" placeholder="输入商品名称 商品编号 订单号"> <div class="botton"><i class=" fa fa-search"></i></div> </form> <div class="clear"></div> </div> <div class="order_right_show" id="register_0" style="display:block"> <div class="order_right_content" > <h2>已收货</h2> <p>2016年09月02日 10：00 | XXX | 订单号： 1234455513234 |在线支付 <span>订单金额：<b> 149</b> 元 </span></p> <div class="order_right_shop"> <img src="./static/img/life4.png"> <p>家居沙发 灰色 <br>356元 X 1</p> <div class="order_right_div"> <p>订单详情</p> <p>售后详情</p> </div> <div class="clear"></div> </div> </div> <div class="clear"></div> </div> <div class="order_right_show" id="register_1" style="display:none"> <p>当前没有待支付订单。</p> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="footer-top"> <div class="footer-top_li"> <div class="footer-top_li_1"> <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span> <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span> <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span> <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span> <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a> </div> <span class="separate"></span> <div class="footer-top_li_2"> <div class="footer-top_li_a"> <dl> <dt>帮助中心</dt> <dd><a href="">账户管理</a></dd> <dd><a href="">购物指南</a></dd> <dd><a href="">订单操作</a></dd> </dl> <dl> <dt>服务支持</dt> <dd><a href="">售后政策</a></dd> <dd><a href="">自助服务</a></dd> <dd><a href="">相关下载</a></dd> </dl> <dl> <dt>线下门店</dt> <dd><a href="">小米之家</a></dd> <dd><a href="">服务网点</a></dd> <dd><a href="">授权体验店</a></dd> </dl> <dl> <dt>关于小米</dt> <dd><a href="">了解小米</a></dd> <dd><a href="">加入小米</a></dd> <dd><a href="">投资者关系</a></dd> </dl> <dl> <dt>关注我们</dt> <dd><a href="">新浪微博</a></dd> <dd><a href="">官网微博</a></dd> <dd><a href="">联系我们</a></dd> </dl> <dl> <dt>特色服务</dt> <dd><a href="">F码通道</a></dd> <dd><a href="">礼物码</a></dd> <dd><a href="">防伪查询</a></dd> </dl> <div class="connect"> <p class="telephone">Feir-520-1314</p> <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p> <button><span class="fa fa-commenting "></span> 联系客服</button> </div> </div> <div class="footer-top_li_b"></div> </div> </div> </div> <div class="footer-bottom"> <div class="footer-bottom_li"> <div class="footer-bottom_li_1"> <img src="https://blog.csdn.net/qq_58401483/article/details/static/img/footlogo.png" alt="" class="logoBottom"> </div> <div class="footer-bottom_li_2"> <div class="footer-bottom_li_a"> <ul> <li>小米商城<span></span></li> <li>MIUI<span></span></li> <li>米家<span></span></li> <li>米聊<span></span></li> <li>多看<span></span></li> <li>游戏<span></span></li> <li>路由器<span></span></li> <li>米粉卡<span></span></li> <li>政企服务<span></span></li> <li>小米天猫店<span></span></li> <li>隐私政策<span></span></li> <li>问题反馈<span></span></li> <li>Select Region</li> </ul> </div> <div class="footer-bottom_li_b"> <a href="">©mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2014]0059-0009号</a> <br> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </div> </div> <div class="footer-bottom_li_3"> <img src="./static/img/footericon1.png" alt="" class="icon"> <img src="./static/img/footericon2.png" alt="" class="icon"> <img src="./static/img/footericon3.png" alt="" class="icon"> <img src="./static/img/footericon4.png" alt="" class="icon"> <img src="./static/img/footericon5.png" alt="" class="icon"> </div> <div class="footer-bottom_li_4"> 探索黑科技，小米为发烧而生！ </div> </div> </div> <script type="text/javascript"> function ChangeReg(divId,divName,Count) { for(var i=0;i<=Count;i++){ document.getElementById(divName+i).style.display="none"; } document.getElementById(divName+divId).style.display="block"; if (divId==0) { document.getElementById("regTabs_0").style.color="#FF6A00"; document.getElementById("regTabs_1").style.color="#757575"; } if (divId==1) { document.getElementById("regTabs_0").style.color="#757575"; document.getElementById("regTabs_1").style.color="#FF6A00"; } } </script></body></html>
五、确认订单页
在此页面，点击我的订单可以跳转到我的订单页面，点击添加新地址可以实现添加地址操作，点击商品可跳转到商品详情页以及选择配送时间。效果如下图：
此页面部分代码如下：
<html lang="en"><head> <title>填写订单信息</title> <meta charset="utf-8"> <link rel="shortcut icon" type="image/x-icon" href="./images/favicon/favicon.ico" /> <link rel="stylesheet" href="./css/cart.css"> <link rel="stylesheet" href="./css/footer1.css"> <link rel="stylesheet" href="./css/shop.css"> <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="./layui/css/layui.css"> <script src="./js/jq_3.3.1_mi.js"></script> <script src="./layui/layui.all.js"></script> <script src="./js/close.js"></script></head><body> <div class="header"> <div class="content"> <div class="content-left"> <a href="" class="logo"></a> <h1 class="title">确认订单</h1> </div> <div class="content-right"> <div class="userinfo"> <div class="username"> <a href="javascript:void(0)" class="toUserInfo">我是刘子祎</a> <ul> <li class="infoitem">个人中心</li> <li class="infoitem">评价晒单</li> <li class="infoitem">我的喜欢</li> <li class="infoitem">小米账户</li> <li class="infoitem">退出登录</li> </ul> </div> <i class="fa fa-angle-down fa-1x"></i> </div> <div class="toOrderDetail"><a href="./order.html">我的订单</a></div> </div> </div> </div> <div class="close_content"> <div class="close_contenter"> <h1>收货地址</h1> <div> <div class="close_add"> <h1>xxx</h1> <h6>177****2345</h6> <h6>河北 xx市 xx区 xx街道</h6> <h6>xx栋 1405室</h6> <span class="del">删除</span> </div> <div class="close_add"> <h1>xxx</h1> <h6>177****2345</h6> <h6>河北 xx市 xx区 xx街道</h6> <h6>xx栋 1405室</h6> <span class="del">删除</span> </div> <div class="close_add1"> <i class="fa fa-plus-square"></i> <h6>添加新地址</h6> </div> <div class="clear"></div> </div> <h2>配送方式 <span style="color: #FF6A00;font-size: 13px;margin-left: 80px;">包邮</span></h2> <div class="close_data"> <h3>配送时间</h3><h5 style="border-color:rgb(255,106,0)">不限送货时间：周一至周日</h5><h5>工作日送货：周一至周五</h5><h5>双休日、假日送货：周六至周日</h5> </div> <h2 style="border: none;margin-top:0px; ">发票<span style="color: #FF6A00;font-size: 13px;margin-left: 125px;">电子发票 个人 商品明细 修改 ></span></h2> <h4>商品及优惠券 <a href="./cart.html">返回购物车 <i class="fa fa-chevron-right"></i> </a></h4> <div class="close_shop"> <p> <img src="./static/img/pms (2).jpg"><a href="./detail.html">红米6A 全网通版 2GB内存 16GB 流沙金 </a>599元 x 1 <span >599元</span> </p> <p><img src="./static/img/pms (1).jpg"><a>小米8 SE 全网通版 4GB内存 64GB 金色 </a>1799元 x 1 <span>1799元</span> </p> <div class="clear"></div> </div> <div class="close_much"> <div class="close_much_left"> <p><i class="fa fa-plus-square"></i>使用优惠券</p> <p><i class="fa fa-plus-square"></i>使用小米礼品卡</p> </div> <div class="close_much_right"> <p>商品件数 :<span>3件</span></p> <p>商品总价 :<span>4999元</span></p> <p>优惠活动 :<span>-0元</span></p> <p>优惠券抵扣 :<span>-0元</span></p> <p>运费 :<span>0元</span></p> <p style="height: 50px;line-height:50px; ">应付总额 :<span class="zong">4999 <b> 元</b></span></p> </div> <div class="clear"></div> </div> </div> <div class="close_clear"> <a href="./close.html"><button class="submit-cart">立即下单</button></a> </div> </div> <div class="footer-top"> <div class="footer-top_li"> <div class="footer-top_li_1"> <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span> <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span> <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span> <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span> <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a> </div> <span class="separate"></span> <div class="footer-top_li_2"> <div class="footer-top_li_a"> <dl> <dt>帮助中心</dt> <dd><a href="">账户管理</a></dd> <dd><a href="">购物指南</a></dd> <dd><a href="">订单操作</a></dd> </dl> <dl> <dt>服务支持</dt> <dd><a href="">售后政策</a></dd> <dd><a href="">自助服务</a></dd> <dd><a href="">相关下载</a></dd> </dl> <dl> <dt>线下门店</dt> <dd><a href="">小米之家</a></dd> <dd><a href="">服务网点</a></dd> <dd><a href="">授权体验店</a></dd> </dl> <dl> <dt>关于小米</dt> <dd><a href="">了解小米</a></dd> <dd><a href="">加入小米</a></dd> <dd><a href="">投资者关系</a></dd> </dl> <dl> <dt>关注我们</dt> <dd><a href="">新浪微博</a></dd> <dd><a href="">官网微博</a></dd> <dd><a href="">联系我们</a></dd> </dl> <dl> <dt>特色服务</dt> <dd><a href="">F码通道</a></dd> <dd><a href="">礼物码</a></dd> <dd><a href="">防伪查询</a></dd> </dl> <div class="connect"> <p class="telephone">Feir-520-1314</p> <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p> <button><span class="fa fa-commenting "></span> 联系客服</button> </div> </div> <div class="footer-top_li_b"></div> </div> </div> </div> <div class="footer-bottom"> <div class="footer-bottom_li"> <div class="footer-bottom_li_1"> <img src="https://blog.csdn.net/qq_58401483/article/details/static/img/footlogo.png" alt="" class="logoBottom"> </div> <div class="footer-bottom_li_2"> <div class="footer-bottom_li_a"> <ul> <li>小米商城<span></span></li> <li>MIUI<span></span></li> <li>米家<span></span></li> <li>米聊<span></span></li> <li>多看<span></span></li> <li>游戏<span></span></li> <li>路由器<span></span></li> <li>米粉卡<span></span></li> <li>政企服务<span></span></li> <li>小米天猫店<span></span></li> <li>隐私政策<span></span></li> <li>问题反馈<span></span></li> <li>Select Region</li> </ul> </div> <div class="footer-bottom_li_b"> <a href="">©mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2014]0059-0009号</a> <br> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </div> </div> <div class="footer-bottom_li_3"> <img src="./static/img/footericon1.png" alt="" class="icon"> <img src="./static/img/footericon2.png" alt="" class="icon"> <img src="./static/img/footericon3.png" alt="" class="icon"> <img src="./static/img/footericon4.png" alt="" class="icon"> <img src="./static/img/footericon5.png" alt="" class="icon"> </div> <div class="footer-bottom_li_4"> 探索黑科技，小米为发烧而生！ </div> </div> </div> <script> layui.use('form', function(){ var form = layui.form; form.render(); }); //弹窗 $('.close_add1').click(function(){ layer.open({ area:['900px'], title: '填写新地址', content: ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' ' + ' 请选择你的省' + ' 北京 ' + ' 上海 ' + ' 广州 ' + ' 深圳 ' + ' 安徽 ' + ' ' + ' \n' + ' \n' + ' ' + ' 请选择你的城市' + ' 合肥 ' + ' 北京 ' + ' 上海 ' + ' 深圳 ' + ' ' + ' \n' + ' \n' + ' ' + ' 请选择你的区' + ' 蜀山 ' + ' 肥东 ' + ' 肥西 ' + ' 政务区 ' + ' ' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' ' }); }) </script></body></html>
$(function(){ $('.close_data h5').click(function(){ $('.close_data h5').css('borderColor','#ccc'); $(this).css('borderColor','#ff6a00'); }) $('.close_add .del').click(function(){ $(this).parents('.close_add').remove(); })})
六、详情页
在详情页中可以点击购物车跳转到购物车页面，点击头部的小米商城可跳转到首页，点击我的订单可以跳转到我的订单页，以及整体布局的完善与实现。可以对版本，颜色和保障服务进行选择，选择之后总价的变化效果等，如下图所示：
此页面部分代码如下所示：
<html><head> <title>红米6A立即购买—小米商城</title> <meta charset="utf-8"> <link rel="shortcut icon" type="image/x-icon" href="./images/favicon/favicon.ico" /> <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="./css/mi.css"> <link rel="stylesheet" type="text/css" href="./css/shop.css"> <link rel="stylesheet" type="text/css" href="./css/footer1.css"> <link rel="stylesheet" type="text/css" href="./font-awesome/css/font-awesome.min.css"><script src="./js/jq_3.3.1_mi.js"></script> <script type="text/javascript" src="./layui/layui.js"></script><script src="./js/detail.js"></script></head><body> <div class="header"> <div class="header_menu"> <ul class="header_left"> <li><a href="./index.html">小米商城</a><span>|</span></li> <li><a href="#">MIUI</a><span>|</span></li> <li><a href="#">IOT</a><span>|</span></li> <li><a href="#">云服务</a><span>|</span></li> <li><a href="#">小爱分享平台</a><span>|</span></li> <li><a href="#">金融</a><span>|</span></li> <li><a href="#">有品</a><span>|</span></li> <li><a href="#">企业服务</a><span>|</span></li> <li><a href="#">SelectRegion</a></li> </ul> <div class="header_right"> <ul> <li><a href="#">登录</a><span>|</span></li> <li><a href="#">注册</a><span>|</span></li> <li><a href="./order.html">我的订单</a></li> <li class="header_right_li"><a href="./cart.html"><i class="fa fa-shopping-cart" ></i> 购物车 ( 0 )</a><div>购物车中还没有商品，赶紧选购吧！</div></li> </ul> </div> </div> </div> <div class="content-top"> <div class="content"> <div class="content_menu"> <div class="content_menu_pic"> <img src="./static/img/logoAD.gif" > </div> <div class="content_menu_ul"> <ul><li>小米手机<div class="mi_phone"><div class="mi_phone_div"><div class="mi_phone_div_1"><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone2.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone3.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div> </div> <div class="clear"></div></div> </div></div></li><li>红米<div class="mi_phone"><div class="mi_phone_div"><div class="mi_phone_div_1"><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone7.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone8.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone9.jpg"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span> </div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="./static/img/phone/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div> </div> <div class="clear"></div></div> </div></div></li><li>电视</li><li>笔记本</li><li>盒子</li><li>新品</li><li>路由器</li><li>智能硬件</li><li>服务</li><li>社区</li></ul> </div> <div class="content-form"> <form> <input type="text" name=""> <div class="content-form-a"><a href="">电视新品</a> <a href="">618预热</a></div> <div class="botton"><i class=" fa fa-search"></i></div> </form> </div> <div class="clear"></div> </div> </div> <div class="detail"> <div class="content"> <div class="detail_left"> <b>小米8</b><span></span><a href="#">小米8 SE</a> </div> <div class="detail_right"> <a href="">概述</a><span></span> <a href="">图集</a><span></span> <a href="">参数</a><span></span> <a href="">F码通道</a><span></span> <a href="">用户评价</a> </div> </div> </div> <div class="shop_detail"> <div class="shop_detail_pic"><div class="layui-carousel" id="test1" lay-filter="test1"> <div carousel-item=""> <div><img src="./static/img/lun/1.jpg"></div> <div><img src="./static/img/lun/2.jpg"></div> <div><img src="./static/img/lun/3.jpg"></div> <div><img src="./static/img/lun/4.jpg"></div> </div></div> </div> <div class="shop_detail_menu"> <h1>红米6A</h1> <p>12nm高性能处理器 / 5.45" 小巧全面屏 / 1300万高清相机 / “小杨柳腰”机身</p> <h2>599</h2> <div class="detail_map"> </i> <span>北京 北京市 东城区 永定门外街道 修改 </a> </span><br> <span style="color:#FF6A00;margin-left: 12px;">有现货</span> </div> <div class="shop_detail_much"> <p>选择版本</p> <div class="detail_much_left">4GB+64GB 全网通 <span data-val="599">599元</span></div><div class="detail_much_left">6GB+64GB 全网通 <span data-val="699">699元</span></div> </div> <div class="clear"></div> <div class="shop_detail_color"> <p>选择颜色</p> <div class="detail_color_left detail_color_left_checked"><span style="background:#F6E6D8; "></span> 金色</div> <div class="detail_color_left"><span style="background:#3C3F43;"></span> 深灰</div> <div class="detail_color_left"><span style="background:#D93239;"></span> 亮红</div> <div class="detail_color_left"><span style="background:#3871B7;"></span> 亮蓝</div> </div> <div class="clear"></div> <div class="shop_detail_bz"> <div class="shop_detail_bz0"> <p>选择小米提供的保障服务</p> <a href="#">了解保障服务 ></a> <div class="clear"></div> </div> <div class="shop_detail_bz1" style="border-bottom: none"><span class="fa fa-check-circle shop_detail_button"></span> <img src="./static/img/bz.jpg"> <div class="shop_detail_1"> <p style="font-size: 18px;color: #333;">意外保障服务</p> <p>手机意外摔落/进水/碾压等损坏</p><b class="fa fa-check-square shop_detail_button"></b> 我已阅读 <a> 服务条款 </a>|<a> 服务条款</a> <span data-val="99">99元</span> </div> </div> <div class="shop_detail_bz1"> <span class="fa fa-check-circle shop_detail_button"></span> <img src="./static/img/bz.jpg"> <div class="shop_detail_1"> <p style="font-size: 18px;color: #333;">碎屏保障服务</p> <p>手机意外碎屏</p> <b class="fa fa-check-square shop_detail_button"></b> 我已阅读 <a> 服务条款 </a>|<a> 服务条款</a> <span data-val="179">179元</span> </div> </div> </div> <div class="shop_detail_zj"> <div> <p>小米8 6GB+64GB 黑色</p><span id="phonePrice">699元</span> <div class="clear"></div> </div> <p id="totalPrice" style="color:#FF6A00;font-size: 25px;margin-left: 30px;">总计：699元</p> </div> <div class="shop_detail_cart">加入购物车</div> <p><i class="fa fa-check-circle-o"></i> 7天无理由退货 <i class="fa fa-check-circle-o"></i> 15天质量问题换货 <i class="fa fa-check-circle-o"></i> 365天保修 </p> </div> <div class="clear"></div> </div> <div class="detail_content"> <div class="detail_content_1"> <p>特别说明</p> <img src="./static/img/sm.jpg"> <p>官方微信</p> <img src="./static/img/2.jpg"> </div> </div> <div class="footer-top"> <div class="footer-top_li"> <div class="footer-top_li_1"> <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span> <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span> <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span> <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span> <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a> </div> <span class="separate"></span> <div class="footer-top_li_2"> <div class="footer-top_li_a"> <dl> <dt>帮助中心</dt> <dd><a href="">账户管理</a></dd> <dd><a href="">购物指南</a></dd> <dd><a href="">订单操作</a></dd> </dl> <dl> <dt>服务支持</dt> <dd><a href="">售后政策</a></dd> <dd><a href="">自助服务</a></dd> <dd><a href="">相关下载</a></dd> </dl> <dl> <dt>线下门店</dt> <dd><a href="">小米之家</a></dd> <dd><a href="">服务网点</a></dd> <dd><a href="">授权体验店</a></dd> </dl> <dl> <dt>关于小米</dt> <dd><a href="">了解小米</a></dd> <dd><a href="">加入小米</a></dd> <dd><a href="">投资者关系</a></dd> </dl> <dl> <dt>关注我们</dt> <dd><a href="">新浪微博</a></dd> <dd><a href="">官网微博</a></dd> <dd><a href="">联系我们</a></dd> </dl> <dl> <dt>特色服务</dt> <dd><a href="">F码通道</a></dd> <dd><a href="">礼物码</a></dd> <dd><a href="">防伪查询</a></dd> </dl> <div class="connect"> <p class="telephone">Feir-520-1314</p> <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p> <button><span class="fa fa-commenting "></span> 联系客服</button> </div> </div> <div class="footer-top_li_b"></div> </div> </div> </div> <div class="footer-bottom"> <div class="footer-bottom_li"> <div class="footer-bottom_li_1"> <img src="https://blog.csdn.net/qq_58401483/article/details/static/img/footlogo.png" alt="" class="logoBottom"> </div> <div class="footer-bottom_li_2"> <div class="footer-bottom_li_a"> <ul> <li>小米商城<span></span></li> <li>MIUI<span></span></li> <li>米家<span></span></li> <li>米聊<span></span></li> <li>多看<span></span></li> <li>游戏<span></span></li> <li>路由器<span></span></li> <li>米粉卡<span></span></li> <li>政企服务<span></span></li> <li>小米天猫店<span></span></li> <li>隐私政策<span></span></li> <li>问题反馈<span></span></li> <li>Select Region</li> </ul> </div> <div class="footer-bottom_li_b"> <a href="">©mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2014]0059-0009号</a> <br> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </div> </div> <div class="footer-bottom_li_3"> <img src="./static/img/footericon1.png" alt="" class="icon"> <img src="./static/img/footericon2.png" alt="" class="icon"> <img src="./static/img/footericon3.png" alt="" class="icon"> <img src="./static/img/footericon4.png" alt="" class="icon"> <img src="./static/img/footericon5.png" alt="" class="icon"> </div> <div class="footer-bottom_li_4"> 探索黑科技，小米为发烧而生！ </div> </div> </div><script>layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1' ,width: '560px' //设置容器宽度 ,height:'560px' ,arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 });});</script></body></html>
$(function(){// 默认选中第一个版本/第一个颜色 $('.detail_color_left').eq(0).attr('class','detail_color_left checked'); $('.detail_much_left').eq(0).attr('class','detail_much_left checked'); updateTotalPrice() //点击选中其他的颜色 $('.detail_color_left').click(function(){ $('.detail_color_left').attr('class','detail_color_left'); $(this).attr('class','detail_color_left checked'); updateTotalPrice() }); //点击选中手机版本 $('.detail_much_left').click(function(){ $('.detail_much_left').attr('class','detail_much_left'); $(this).attr('class','detail_much_left checked'); updateTotalPrice(); }) //点击保障服务 $('.shop_detail_bz1').click(function(){ var nowcircleclass=$(this).find('.fa-check-circle').attr('class'); var nowclass=$(this).find('.fa-check-square').attr('class'); if(nowcircleclass.indexOf('checked')>0){ //如果存在,则移除选中; nowcircleclass=nowcircleclass.replace('checked',''); nowclass=nowclass.replace('checked',''); $(this).find('.fa-check-circle').attr('class',nowcircleclass); $(this).find('.fa-check-square').attr('class',nowclass); }else{ //不存在, 则选中 $(this).find('.fa-check-circle').attr('class',nowcircleclass+' checked'); $(this).find('.fa-check-square').attr('class',nowclass+' checked'); } updateTotalPrice(); }) //统计总价格 function updateTotalPrice(){ //版本价钱 var bbprice=$(".detail_much_left[class$='checked']").find('span').attr('data-val')*1; //服务价钱 var svprice=0; var svspan=$(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]'); for(var i=0;i<svspan.length;i++){ svprice+=svspan[i].getAttribute('data-val')*1; } //总价值 var totalprice=bbprice+svprice; $('#totalPrice').html('总计：'+totalprice+'元') $('#phonePrice').html(bbprice+'元'); }})
七、整体结构和效果图
总结
以上便是小米商城项目了，小米商城官网项目代码太多了，只能在这里放部分代码了，如果大家对此项目感兴趣，或者需要小米商城项目源码的可以关注私聊我，我随时都在。