基于html-css-js的尚有选页面源码详细
目录
效果展示：
源码：
文件结构：
index.html中：
在index.js中：
在data.js中：
在image中：
在reset.css中：
在index.less中：
在index.css中：
在clear.less中：
在clear.css中：
效果展示：
源码：
代码较多，可以点击目录复制代码
文件结构展示（先按照我这个结构创建）：
index.html中：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>尚优选项目详情页面</title><link rel="stylesheet" href="/css/reset.css"/><link rel="stylesheet" href="./css/index.css"/><!-- <style>a { text-decoration: none; color: #666;}</style> -->
</head>
<body><!-- 最外层的包裹元素 --><div id="wrapper"><!-- 头部 --><header id="header"><!-- 上部分 --><div class = "headTop"><!-- 版心元素 --><div class="headTopMain"><!-- 左侧 --><div class="left"><h5>欢迎来到尚优选! 请</h5><P><a href="javascript:;">登录</a><a href="javascript:;">注册</a></P></div><!-- 右侧 --><div class="right"><nav><a href="javascript:;">我的订单</a><a href="javascript:;">我的购物车</a><a href="javascript:;">我的尚优选</a><a href="javascript:;">尚优选会员</a><a href="javascript:;">企业采购</a><a href="javascript:;">关注尚优选</a><a href="javascript:;">合作招商</a><a href="javascript:;">商家后台</a></nav></div></div></div><!-- 下部分 --><div class="headBottom"><!-- 版心 --><div class="headBottomMain"><!-- 左侧 --><h1 class="logo"><a href="javascript:;"><img src="image/780.jpg"/></a></h1><!-- 右侧 --><div class="search"><input type = "text" placeholder="请输入搜索框"/><input type="submit" value="搜索"></div></div></div></header><!-- 头部结束 --><!-- 分类导航开始 --><div id="navWrap"><!-- 版新元素 --><div class="navWrapMain"><a href="javascript:;">全部商品分类</a><a href="javascript:;">服装城</a><a href="javascript:;">美妆馆</a><a href="javascript:;">尚优选超市</a><a href="javascript:;">全球购</a><a href="javascript:;">闪购</a><a href="javascript:;">团购</a><a href="javascript:;">有趣</a><a href="javascript:;">秒杀</a></div></div><!-- 分类导航结束 --><!-- 内容区开始 --><div id = content><!-- 版心元素 --><div class="contentMain"><!-- 路径导航 --><div id="navPath"><!-- <a>手机,数码,通讯</a><i>/</i><a href="javascript:;">手机</a><i>/</i><a href="javascript:;">Apple苹果</a><i>/</i><a href="javascript:;">iphone 6S系列</a> --></div><!-- 路径导航结束 --><!-- 中间区域开始 --><div id = center><!-- 左侧放大镜开始 --><div id="left"><!-- 上边 --><div id="leftTop"><!-- 小图框 --><div id="smallPic"><!-- 小图片 --><img src="image/手机.jpg" alt = ""/><!-- 蒙版元素 --><!-- <div class="mask"></div> --></div><!-- 大图框 --><!-- <div id="bigPic">大图片<img src="image/手机.jpg" alt = ""/></div> --></div><!-- 下边 --><div id="leftBottom"><a href="javascript:;" class = "prev">< </a><div id="piclist"><!-- <div></div> --><ul> </ul></div><a href="javascript:;" class="next">> </a></div></div><!-- 左侧放大镜结束 --><!-- 商品详情区域开始 --><div class="right"><!-- 商品详情数据结构开始 --><div class="rightTop"></div><!-- 商品详情数据结构结束 --><!-- 商品参数数据结构开始 --><div class="rightBottom"><!-- 选择之后结果的区域开始 --><!-- 选择之后结果的区域结束 --><div class="choose"></div><!-- 商品参数的选择区域开始 --><div class="chooseWrap"></div><!-- 商品参数的选择区域结束 --><!-- 加入购物车以及数量区域开始 --><div class="addCart"><div class="count"><input type="text" name="" id=""><a href="javascript:;">+</a><a href="javascript:;">-</a></div><button>加入购物车</button></div><!-- 加入购物车以及数量区域开始 --></div><!-- 商品参数数据结构结束 --></div><!-- 商品详情区域结束 --></div><!-- 中间区域结束 --><!-- 商品详情中间部分开始 --><div class="goodsDetailWrap"><!-- 左边侧边栏 --><aside class="leftAside"><!-- 上边 --><div class="asideTop"><h4 class="active">相关分类</h4><h4>推荐品牌</h4></div><!-- 下边 --><div class="asideContent"><div class="active"><ul class="goodslist1"><li>手机</li><li>手机壳</li><li>内存卡</li><li>iphone配件</li><li>贴膜</li><li>手机耳机</li><li>移动电源</li><li>平板电脑</li></ul><ul class="goodslist2"><li><img src="image/充电宝.png" alt=""><span>Apple苹果iPhone 6s (A1699)</span><p>$6088.00</p><div class="button"><a href="javascript:;">加入购物车</a></div></li><li><img src="image/充电宝.png" alt=""><span>Apple苹果iPhone 6s (A1699)</span><p>$6088.00</p><div class="button"><a href="javascript:;">加入购物车</a></div></li><li><img src="image/充电宝.png" alt=""><span>Apple苹果iPhone 6s (A1699)</span><p>$6088.00</p><div class="button"><a href="javascript:;">加入购物车</a></div></li><li><img src="image/充电宝.png" alt=""><span>Apple苹果iPhone 6s (A1699)</span><p>$6088.00</p><div class="button"><a href="javascript:;">加入购物车</a></div></li></ul></div><div>推荐品牌内容</div></div></aside><!-- 右边结构 --><div class="rightDetail"><!-- 选择搭配开始 --><div class="chooseBox"><!-- 标题 --><h4>选择搭配</h4><!-- 内容 --><div class="listWrap"><!-- 最左边 --><div class="left"><img src="image/手机2.jpg" alt=""><p>$5299</p><i>+</i></div><!-- 中间 --><ul class="middle"><li><img src="image/dog1.png" alt=""><span>Feless费勒斯VR</span><div><input type="checkbox" value = "50"><span>50</span></div></li><li><img src="image/dog2.png" alt=""><span>Feless费勒斯VR</span><div><input type="checkbox" value = "50"><span>50</span></div></li><li><img src="image/dog3.png" alt=""><span>Feless费勒斯VR</span><div><input type="checkbox" value = "50"><span>50</span></div></li><li><img src="image/dog4.png" alt=""><span>Feless费勒斯VR</span><div><input type="checkbox" value = "50"><span>50</span></div></li></ul><!-- 右侧 --><div class="right"><div>已购0件</div><p>套餐价</p><i>￥5299</i><div><button>加入购物车</button></div></div></div></div><!-- 选择搭配结束 --><!-- 选项卡开始 --><div class="BottomDetail"><!-- 菜单 --><ul class="tabBtns"><li class="active"><a href="javascript:;">商品介绍</a></li><li><a href="javascript:;">规格包装</a></li><li><a href="javascript:;">售后与保障</a></li><li><a href="javascript:;">商品评价</a></li><li><a href="javascript:;">手机社区</a></li></ul><!-- 内容 --><div class="tabContains"><div class="active"><ul><li>分辨率：1920*1080(FHD)</li><li>后置摄像头：1200万像素</li><li>前置摄像头：500万像素</li><li>核 数：其他</li><li>频 率：以官网信息为准</li><li>品牌：Apple</li><li>商品名称：APPLEiPhone 6s Plus</li><li>商品编号：1861098</li><li>商品产地：中国大陆</li><li>商品毛重：0.51kg</li><li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li><li>系统：苹果（IOS）</li><li>像素：1000-1600万品毛重：0.51kg</li><li>机身内存：64GB</li></ul><img src="image/intro01.png" alt=""><img src="image/intro02.png" alt=""><img src="image/intro03.png" alt=""></div><div>规格包装</div><div>售后与保障</div><div>商品评价</div><div>手机社区</div></div></div><!-- 选项卡结束 --></div></div><!-- 商品详情中甲部分结束 --></div></div><!-- 内容区结束 --><!-- 右侧侧边栏开始 --><div class="rightAside asideClose"><!-- 按钮区域 --><div class="btns btnsClose"></div><!-- 侧边连内容区 --><div class="content"><!-- 侧边导航 --><ul class="navlist"><li><!-- 小图标 --><p></p><i>尚优选会员</i></li><li><!-- 小图标 --><p></p><i>尚优选会员</i></li><li><!-- 小图标 --><p></p><i>尚优选会员</i></li><li><!-- 小图标 --><p></p><i>尚优选会员</i></li><li><!-- 小图标 --><p></p><i>尚优选会员</i></li><li><!-- 小图标 --><p></p><i>尚优选会员</i></li></ul></div></div><!-- 右侧侧边栏结束 --></div><script src="js/data.js"></script><script src="js/index.js"></script>
</body>
</html>在index.js中：
// 需要将所有的dom元素对象以及相应的资源全部都加载完后在实践的事件函数
window.onload = function(){//声明一个记录点击的缩略图下标var BigImgIndex = 0;//路径导航的数据渲染navPathDataBind();function navPathDataBind(){/*** 1.先获取路径导航的页面元素(navPath)* 2.在获取所需要的数据（data.js->gooData.path）* 3.由于数据需要动态产生的，那么相应的dom元素也应该是动态产生的（需要创建dom元素，根据数据的数量）* 4.在遍历数据创建最后一条之创建a标签不创建i*///1.获取元素对象var navPath = document.querySelector('#wrapper #content .contentMain #navPath');//2.获取数据var path = goodData.path;//3.遍历数据for(var i = 0;i<path.length;i++){if(i == path.length-1){var aNode = document.createElement("a");aNode.innerText = path[i].title; navPath.appendChild(aNode)}else{//创建a标签var aNode = document.createElement("a");aNode.href = path[i].url;aNode.innerText = path[i].title; //创建i标签var iNode = document.createElement("i");iNode.innerText = '/';//4.navPath追加a和inavPath.appendChild(aNode);navPath.appendChild(iNode);}}}//放大镜的移入和移出效果bigClassBind();function bigClassBind(){/* 思路：1.获取小图框元素对象，并且设置移入的事件（onmouseover(向上冒泡),onmouseenter（不给父元素））2.动态的创建蒙版元素以及大图框和大图片元素3.移除时需要移除蒙版元素和大图框*///1.获取小图框元素var smallPic = document.querySelector("#smallPic");var leftTop = document.querySelector("#leftTop");//获取数据var imagesSrc = goodData.imagesSrc;//2.设置移入事件smallPic.onmouseenter = function(){//3.创建蒙版元素var maskDiv = document.createElement('div');maskDiv.className = "mask";//4.创建大图框元素var BigPic = document.createElement("div");BigPic.id = "bigPic";//创建大图片元素var BigImg = document.createElement("img");BigImg.src = imagesSrc[BigImgIndex].b;//大图框加图片BigPic.appendChild(BigImg);//小图框追加蒙版smallPic.appendChild(maskDiv);//leftTop追加大图框leftTop.appendChild(BigPic);//涉嫌hi移动事件smallPic.onmousemove = function(event){//var left = event.clientX-smallPic.getBoundingClientRect().left-maskDiv.offsetWidth/2;var top = event.clientY-smallPic.getBoundingClientRect().top-maskDiv.offsetHeight/2;//判断if(left<0){left = 0}else if(left>smallPic.clientWidth-maskDiv.offsetWidth){left = smallPic.clientWidth-maskDiv.offsetWidth}if(top<0){top = 0}else if(top>smallPic.clientHeight-maskDiv.offsetHeight){top = smallPic.clientHeight-maskDiv.offsetHeight}//设置left，top属性maskDiv.style.left = left+"px";maskDiv.style.top = top+"px";//移动比例关系// 移动比例=蒙版元素移动的距离/ 大图片元素移动的距 // 蒙版元素移动的最大距离 蒙版移动距离=小图框宽度−蒙版宽度
// 大图片元素移动的最大距离 大图片移动距离 =大图片宽度−大图框宽度var scale = (smallPic.clientWidth - maskDiv.offsetWidth)/(BigImg.offsetWidth-BigPic.clientWidth)// console.log(scale)//接近0.495BigImg.style.left = -left/scale+'px';BigImg.style.top = -top/scale+'px';}//设置移除smallPic.onmouseleave = function(){//让小图框移除蒙版smallPic.removeChild(maskDiv);//leftTop移除大图框leftTop.removeChild(BigPic);}}}//动态渲染放大镜缩略图数据thunbnailData();function thunbnailData(){/* 1.先获取piclist元素下的ul2.在获取data.js下的goodData下的imagessrc3.遍历数组，根据数组的长度创建li元素*///获取piclist元素下的ulvar ul = document.querySelector('#wrapper #content .contentMain #center #left #leftBottom #piclist ul ')//2.在获取data.js下的goodData下的imagessrcvar images = goodData.imagesSrc;// console.log(images)for(var i = 0 ; i<images.length ; i++){//创建livar newLi = document.createElement("li");//创建imagevar newImage = document.createElement("img");newImage.src = images[i].s;//li追加newLi.appendChild(newImage);//ul追加liul.appendChild(newLi);}}//点击缩略图效果thumbnailClick()function thumbnailClick(){/* 思路：获取所有的li元素，循环发生点击事件点击缩略图，需要确定器下标位置来找到对应小图路径和大图路径，替换现有src的值*///获取所有的li元素var liNodes = document.querySelectorAll('#wrapper #content .contentMain #center #left #leftBottom #piclist ul li');var smallPic_img= document.querySelector('#wrapper #content .contentMain #center #left #leftTop #smallPic img');var imagesSrc = goodData.imagesSrc;//小图路径需要默认和imagessrc的第一个元素小图的路径一致smallPic_img.src = imagesSrc[0].s;// console.log(liNodes)//循环点击li标签for(var i = 0;i<liNodes.length;i++){//回调函数异步，同步代码先执行，页面加载完都已经执行完了，i不能当下标用//在点击事件之前给每一个元素添加自定义下标liNodes[i].index = i;/* 还可以通过setAttribute的方式，这个方法可以将自定义属性写到元素身上 */liNodes[i].onclick = function(){//事件函数中的this永远指向实际发生事件目标的源对象var idx = this.index;BigImgIndex = idx;//变化小图路径smallPic_img.src = imagesSrc[idx].s;}}}//点击缩略图左右箭头的效果thumbnailLeftRightClick()function thumbnailLeftRightClick(){/* 获取左右两端箭头按钮 获取可视的div以及ul元素和所有的li元素计算（发生起点，步长，总体距离值）然后发生点击事件*/// 获取箭头元素var prev = document.querySelector('#wrapper #content .contentMain #center #left #leftBottom a.prev');var next = document.querySelector('#wrapper #content .contentMain #center #left #leftBottom a.next');// console.log(prev);// console.log(next);//获取ul livar piclist = document.querySelector('#wrapper #content .contentMain #center #left #leftBottom #piclist');var ul = document.querySelector('#wrapper #content .contentMain #center #left #leftBottom #piclist ul');var liNodes = document.querySelectorAll('#wrapper #content .contentMain #center #left #leftBottom #piclist li');//计算//起点var start = 0;//步长var step = (liNodes[0].offsetWidth+20)*2//总体距离值 = ul宽度 - div框的宽度 = （图片总数-div中显示的数量）*（li宽度+20）var endPosition = (liNodes.length-5)*(liNodes[0].offsetWidth+20);//发生事件prev.onclick = function(){start-=step;if(start<0){start = 0;}ul.style.left = -start+'px';}next.onclick = function(){start+=step;if(start>endPosition){start = endPosition;}ul.style.left = -start+'px';}}//商品详情动态渲染rightTopData()function rightTopData(){/* 查找rightTop元素查找data.js->goodData->goodsData建立一个字符串变量，将原来的布局结构贴进来，将所对应的数据放在*///查找元素var rightTop = document.querySelector('#wrapper #content .contentMain #center .right .rightTop');//查找数据var goodsDetail = goodData.goodsDetail;//创建一个字符串变量//在模板字符串替换var s = `<h3>${goodsDetail.title}</h3><p>${goodsDetail.recommend}</p><div class="priceWrap"><div class="priceTop"><span>价 格</span><div class="price"><span>￥</span><p>${goodsDetail.price}</p><i>降价通知</i></div><p><span>累计评价</span><span>${goodsDetail.evaluateNum}</span></p></div><div class="priceBottom"><span>促 销</span><p><span>${goodsDetail.promoteSales.type}</span><span>${goodsDetail.promoteSales.content}</span></p></div></div><div class="support"><span>支 持</span><p>${goodsDetail.support}</p></div><div class="address"><span>配送至</span><p>${goodsDetail.address}</p></div>`//重新渲染rightTop.innerHTML = s;}//商品参数数据渲染rightBottomData()function rightBottomData(){/* 找rightBottom的元素对象查找data.jd->goodData,goodsDetail.crumbData数据由于数据是一个数组需要遍历，有一个元素需要有一个动态的dl元素对象（dt，dd）*///查找元素对象var chooseWrap = document.querySelector('#wrapper #content .contentMain #center .right .rightBottom .chooseWrap');//查找数据var crumbData = goodData.goodsDetail.crumbData;//循环数据for(var i = 0 ;i<crumbData.length;i++){var dlNode = document.createElement("dl");var dtNode = document.createElement("dt");dtNode.innerText = crumbData[i].title; dlNode.appendChild(dtNode);//遍历dd元素for(var j =0 ;j<crumbData[i].data.length;j++){//创建ddvar ddNode = document.createElement("dd");ddNode.innerText = crumbData[i].data[j].type;ddNode.setAttribute('price',crumbData[i].data[j].changePrice)dlNode.appendChild(ddNode);}chooseWrap.appendChild(dlNode);}}//点击商品参数之后颜色的排他效果clikddBind()function clikddBind(){/* 颜色排他效果1.获取所有dl元素，取其中第一个dl元素下的所有dd做测试2.循环所有dd元素添加点击事件3.确定实际发生事件的目标源对象，然后给其他所有的元素颜色重置为基础颜色===================================================================点击dd之后产生的mark标记1.首先创建一个容纳点击的dd元素值的容器，确定数组的起始长度,添加默认值2.然后再将点击的dd元素的值按照对应小标写入到数组元素身上*///1.找所有dl元素var dlNode = document.querySelectorAll('#wrapper #content .contentMain #center .right .rightBottom .chooseWrap dl ');var arr = new Array(dlNode.length);var choose = document.querySelector('#wrapper #content .contentMain #center .right .rightBottom .choose')//数组填充为0arr.fill(0);for(var k = 0 ; k<dlNode.length;k++){(function(k){var ddNodes = dlNode[k].querySelectorAll('dd');//遍历当前所有的dd元素for(var i = 0;i<ddNodes.length;i++){ddNodes[i].onclick = function(){//清空choose元素choose.innerHTML = "";for(var j = 0 ;j<ddNodes.length ; j++){ddNodes[j].style.color = "#666";}this.style.color = "red";//点击哪个元素，动态创建对象arr[k] = this;changePriceBind(arr);//遍历arr数组将非0元素写入mark中arr.forEach(function(value,index){if(value!=0){//创建div元素var markDiv = document.createElement('div')markDiv.className = 'mark';markDiv.innerText = value.innerText;var aNode = document.createElement('a');aNode.innerText = 'X';//设置下标aNode.setAttribute('index',index);markDiv.appendChild(aNode)//让choose循环追加choose.appendChild(markDiv)}})//获取所有a标签循环发生点击事件var aNodes = document.querySelectorAll('#wrapper #content .contentMain #center .right .rightBottom .choose .mark a');for(var n = 0;n<aNodes.length;n++){aNodes[n].onclick = function(){//获取点击a身上的index的值var idx = this.getAttribute('index');// 回复数组中对应下标元素的值arr[idx] = 0;//找到对应下标中所有的dd元素var ddlist = dlNode[idx].querySelectorAll('dd');for(var m = 0;m<ddlist.length;m++){//其余为灰色ddlist[m].style.color = "#666";}ddlist[0].style.color='red';//删除对应下标位置的mark标记choose.removeChild(this.parentNode);//调用价格函数changePriceBind(arr)}}}}})(k)}}//价格变动的函数声明/* 这个函数需要在点击dd或者删除mark时调用*/function changePriceBind(arr){/* 获取价格的标签元素给每一个dd标签身上设置一个默认自定义属性，记录变化的价格遍历arr数组，将dd元素身上新变化的价格和已有的价格相加将计算后的结果重新渲染*/var oldPrice = document.querySelector('#wrapper #content .contentMain #center .right .rightTop .priceWrap .priceTop .price p');var price = goodData.goodsDetail.price;//遍历arrfor(var i =0;i<arr.length;i++){if(arr[i]){var changePrice = Number(arr[i].getAttribute('price'))price = price+changePrice;}}oldPrice.innerText = price;var leftPrice = document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p ')leftPrice.innerText = '￥'+price; //遍历选择搭配中所有的复选框元素看是否有选中var ipts = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .middle li input')for(var j = 0;j<ipts.length;j++){if(ipts[j].checked){price+=Number(ipts[j].value)}} var newPrice = document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .right i ');newPrice.innerText = '￥'+price;leftPrice.innerText = '￥'+price;}//选择发配和中间区域复选框中套餐价变动效果chooseprice()function chooseprice(){/* 思路：1.先获取中间区域的所有复选框元素2.遍历这些元素取出价格，和基础价格进行累加，累加之后重新写道套餐价*///获取复选框元素var ipts = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .middle li input')var leftPrice = document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p ')var newPrice = document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .right i ');//2.遍历复选框for(var i = 0 ;i<ipts.length;i++){ipts[i].onclick=function(){//$5299从5开始截取var oldPrice = Number(leftPrice.innerText.slice(1));for(var j = 0;j<ipts.length;j++){if(ipts[j].checked){//新 = 左侧价格+选中oldPrice = oldPrice+Number(ipts[j].value)}}//重新写入套餐价newPrice.innerText='￥'+oldPriceleftPrice.innerText="￥"+oldPrice}}
}//封装一个公共的选项卡
/*
1.被点击的元素
2.被切换显示的元素
*/function Tab(tabBtns,tabConts){for(var i =0;i<tabBtns.length;i++){tabBtns[i].index = i;tabBtns[i].onclick = function(){for(var j =0;j<tabBtns.length;j++ ){tabBtns[j].className = '';tabConts[j].className = '';}this.className='active'tabConts[this.index].className ='active' }}}//点击左侧选项卡leftTab()function leftTab(){//点击的元素var h4s = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .leftAside .asideTop h4 ');//被切换显示 的var divs = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .leftAside .asideContent >div');//调用函数Tab(h4s,divs);}//点击右侧选项卡rightTab()function rightTab(){var lis = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .BottomDetail .tabBtns li ');//被切换的显示元素var divs = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .BottomDetail .tabContains div');Tab(lis,divs)}//右边侧边栏的点击效果rightAsideBind()function rightAsideBind(){/* 1.找到按钮元素发生点击事件2.记录初始状态，再点击事件的内部进行判断3.切换类名即可*///找按钮元素var btns = document.querySelector('#wrapper .rightAside .btns');//记录初始状态var flag = true;//查找侧边栏元素var rightAside = document.querySelector('.rightAside');//点击事件btns.onclick=function(){//判断if(flag){//展开// flag=falsebtns.className = "btns btnsOpen" rightAside.className = "rightAside asideOpen"}else{//关闭// flag=truebtns.className = "btns btnsClose"rightAside.className = "rightAside asideClose"}// 无论执行的是谁，最后都是在原来基础之上进行取反flag = !flag;}}
}在data.js中：
var goodData = {path: [{title: "手机、数码、通讯",url: "/category/electronics"},{title: "手机",url: "/category/phones"},{title: "Apple苹果",url: "/brand/apple"},{title: "iphone 65系",url: "/product/iphone65"}],imagesSrc: [{b:"/image/手机.jpg", s:"/image/手机.jpg",},{b:"/image/手机2.jpg", s:"/image/手机2.jpg",},{b:"/image/手机.jpg", s:"/image/手机.jpg",},{b:"/image/手机.jpg", s:"/image/手机.jpg",},{b:"/image/手机.jpg", s:"/image/手机.jpg",},{b:"/image/手机.jpg", s:"/image/手机.jpg",},{b:"/image/手机.jpg", s:"/image/手机.jpg",},{b:"/image/手机.jpg", s:"/image/手机.jpg",},{b:"/image/手机.jpg", s:"/image/手机.jpg",},{b:"/image/手机.jpg", s:"/image/手机.jpg",},{b:"/image/手机.jpg", s:"/image/手机.jpg",}],goodsDetail: {title: "Apple iPhone 6s (A1700) 64G玫瑰金色.移动通信电信4G手机bbb123",recommend: "推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返",price: 5299,promoteSales: {type: "加价购",content: "满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品"},support: "以旧换新，闲置手机回收.4G套餐超值抢.礼品购",address: "广东省·深圳市·宝安区",evaluateNum: 670000,crumbData : [{"title" : "选择颜色","data" : [{type: "红色",changePrice:0},{type: "银色",changePrice:40},{type: "黑色",changePrice:80}]},{"title" : "内存容量","data" : [{type: "16GB",changePrice:0},{type: "64GB",changePrice:40},{type: "128GB",changePrice:90},{type: "256GB",changePrice:100}]},{"title" : "选择版本","data" : [{type: "公开版",changePrice:0},{type: "移动版",changePrice:40},]},{"title" : "购买方式","data" : [{type: "官方标配",changePrice:0},{type: "优惠移动版本",changePrice:40},{type: "优惠电信版",changePrice:400},]},]}
};在image中：
图片可以自己搜索
在reset.css中：
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p,
dl, dt, dd, ul, ol, li,
pre,
fieldset, button, input, textarea,
th, td {margin: 0;padding: 0;
}/* 设置默认字体 */
body,
button, input, select, textarea { /* for te */font: 12px/1.3 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\$b8b\4f53";color: ■#333;
}h1 { font-size: 18px; }/* 18px / 12px = 1.5 */
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
b, strong{ font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace;}
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */
ul, ol { list-style: none;}
/* 重置文本格式元素 */
a { text-decoration: none; color: #666;}
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; }
button, input, select, textarea {font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
table {border-collapse: collapse;border-spacing: 0;
}
/* 重置 hr */
hr {border: none;height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
a:link:hover{color : lightgreen !important;text-decoration: underline;
}
input{ /*去除外轮廓*/outline: none;
}
img{ /*去除行内元素换行符问题*/display: block;
}
在index.less中：
@import 'mixins/clear.less';
// 最外层包裹元素
#wrapper{// 头部#header{// 上面部分.headTop{background-color: #eaeaea;height: 30px;// 版心元素.headTopMain{width: 1200px;margin: 0 auto;line-height: 30px;.clearfix();// 左侧.left{float: left;h5{float: left;margin-right: 5px;}p{float: left;a{&:first-child{border-right: 1px solid #b3aeab;padding-right: 5px;}}}}//右侧.right{float: right;nav{// 去掉间距font-size: 0px;a{//避免被父元素影响font-size: 12px;margin-right: 10px;padding-right: 10px;border-right: 1px solid #b3aeae;&:last-child{border: none;margin-right: 0px;padding-right: 0px;}}}}}}// 下面.headBottom{// 版心.headBottomMain{width: 1200px;margin: 0 ;float: left;margin-left: 350px;.clearfix();// 左侧.logo{float: left;a{img{width: 75px;height: 56px;margin: 25px 50px;}}}//右侧.search{float: right;margin-top: 35px;margin-left: 150px;input{//文本框&:first-child{box-sizing: border-box;width: 490px;height: 32px;padding: 0 4px;border: 3px solid #ea4a36;float: left;}//提交按钮&:last-child{width: 68px;height: 32px;color: #fff;background-color:#ea4a36 ;border: none;}}}}}}// 头部结束// 分类导航开始#navWrap{border-bottom: 1px solid #e1251b;//版心元素.navWrapMain{width: 1200px;margin: 0 auto;.clearfix();a{margin: 0 22px;font-size: 16px;color: #333;float: left;line-height: 50px;&:first-child{float: left;width: 210px;height: 50px;background : #e1251b;color: #fff;font-size: 14px;font-weight: bold;text-align: center;line-height: 50px;}}}}//分类导航结束//内容区域开始#content{//版心元素.contentMain{width: 1200px;margin: 15px auto 0 auto;#navPath{font-size: 0px;padding: 9px 15px 9px 0;a{font-size: 12px;}i{padding: 0 5px;font-size: 12px;}}// 路径导航结束// 中间区域开始#center{.clearfix();margin: 5px 0 15px;#left{width: 400px;float: left;//上面#leftTop{width: 400px;height: 400px;border:1px solid #dfdfdf;position: relative;//小图框#smallPic{position: relative;img{width: 400px;height: 400px;}//蒙版.mask{width: 200px;height: 200px;background:rgb(255, 255, 255);opacity: 0.5; border:1px solid #ddd;position: absolute;left: 0px;top:0px;}}//大图框#bigPic{width: 400px;height: 400px;border: 1px solid #ddd;position: absolute;left: 420px;top:0px;// 溢出隐藏overflow: hidden;// 大图片img{width: 800px;height: 800px;position: absolute;left: 0px;top: 0px;}}}//下面#leftBottom{width: 400px;margin-top: 5px;.clearfix();a{width: 10px;height: 54px;border: 1px solid #ccc;background: #ebebeb;text-align: center;line-height: 54px;float: left;&:first-child{margin-right: 4px;}}#piclist{width: 372px;float: left;overflow: hidden;position: relative;ul{position: relative;transition: 0.5s;left: 0px;top: 0px;display: flex; /* ✅ 启用 Flex 布局 */flex-wrap: nowrap; /* 禁止换行 */padding: 0; /* 清除默认内边距 */margin: 0; /* 清除默认外边距 */list-style: none;font-size: 0px;gap:20px; li{width: 50px;height: 50px;border: 1px solid #ccc;padding: 2px;// margin-right: 20px;// display: block;// float: left;img{width: 50px;height: 50px;}}}}a{width: 10px;height: 54px;border: 1px solid #ccc;background: #ebebeb;text-align: center;line-height: 54px;float: left;}}}// 右侧区域开始.right{width: 700px;float: right;//商品详情数据.rightTop{h3{font-size: 14px;line-height: 21px;margin-top: 15px;}>p{color: #e12228;margin-top: 15px;}.priceWrap{margin-top: 10px;line-height: 28px;background-color: #fee9ec;padding: 7px;.priceTop{.clearfix();//价格>span{margin-right: 15px;float: left;}//中间.price{float: left;color:#cc1122;>span{float: left;font-size: 16px;}>p{float: left;font-size: 24px;font-weight: bold;}i{float: left;font-size: 12px;color: #cc1122;}}//累计评价>p{float: right;>span{}}}.priceBottom{.clearfix();//促销>span{float: left;margin-right: 15px;}//加价购p{width: 520px;list-style: 28px;float: left;>span{color: #999;&:first-child{background:#c81623 ;padding:3px ;color:#fff;}}}}}.support{padding-bottom: 5px;margin-top: 10px;line-height: 28px;.clearfix();>span{margin-right: 15px;float: left;}>p{float: left;color: #999;}}.address{border-bottom: 1px solid #ededed;padding-bottom: 10px;margin-top: 5px;line-height: 28px;.clearfix();>span{margin-right: 15px;float: left;}>p{float: left;color: #999;}}}//下面.rightBottom{margin-top: 10px;line-height: 28px;.choose{.clearfix();.mark{height: 30px;background: snow;border: 1px solid #ddd;padding: 0px 20px;margin-right: 20px;text-align: center;line-height: 30px;float: left;a{color: red;margin-left: 20px;}}}.chooseWrap{dl{margin-top:13px ;margin-bottom:13px ;.clearfix();dt{float: left;margin-right: 15px;}dd{float: left;margin-right: 5px;color: #666;line-height: 24px;padding:2px 14px ;border-top:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #bbb;border-bottom:1px solid #bbb;&:first-of-type{color: #e12228;}}}}//添加购物车区域开始.addCart{.clearfix();.count{width: 55px;margin-right: 15px;position: relative;float: left;input{width: 38px;height: 38px;border: 1px solid #ddd;color: #555;}a{border: 1px solid #ddd;width: 15px;height: 19px;color: #666;background:#f1f1f1;position: absolute;right: 1px;text-align: center;line-height: 18px;&:first-child{top:0px;}&:last-child{top: 20px;border-top: 0px;}}}button{padding-left: 25px;padding-right: 25px;height: 36px;font-size: 16px;background: #e1251b;color: #fff;border: none;float: left;}}//添加购物车区域结束}}//右侧区域结束}//中间区域结束//商品详情中间部分开始.goodsDetailWrap{width: 1200px;margin:30px;.clearfix();//左边的侧边栏.leftAside{float: left;width: 210px;border: 1px solid #ccc;.clearfix();height: 1000px;//上边.asideTop{.clearfix();h4{width: 105px;float: left;height: 40px;background-color: #fff;text-align: center;line-height: 40px;border-bottom: 1px solid #ccc;border-top:3px solid #fff;&.active{text-align: center;border-top:3px solid #e1251b;width: 105px;line-height: 37px;border-bottom: none;}}}.asideContent{padding: 10px;div{display: none;&.active{display: block;ul{&.goodslist1{.clearfix();li{margin-bottom: 20px;width: 50%;border-bottom: 1px dashed #ededed;line-height: 28px;float: left;}}&.goodslist2{margin: 5px 0 15px;li{margin-bottom: 20px;text-align: center;border-bottom:1px solid #ededed;img{width: 152px;}span{}p{font-size: 16px;color: #c81623;}.button{margin-top: 5px;margin-bottom: 5px;text-align: center;a{border: 1px solid #8c8c8c;color:#8c8c8c;padding: 2px 14px;line-height: 18px;}}}}}}}}}//右侧.rightDetail{margin-left: 8px;float: left;width: 980px;//选择搭配开始.chooseBox{border: 1px solid #ddd;margin-bottom: 15px; h4{border-bottom: 1px solid #ddd;background:#f1f1f1;color:#333;padding:5px 0 5px 15px;}.listWrap{height: 170px;padding-top:10px;.left{float: left;width: 127px;height: 165px;position: relative;text-align: center;img{width: 120px;margin: 0 auto;}p{color:#c81623;font-size:16px;}i{position: absolute;top: 48px;right: 0px;font-size: 16px;}}.middle{width: 668px;height: 165px;float: left;text-align: center;li{float: left;width: 127px;margin-left: 20px;margin-right: 20px;img{width: 120px;height: 130px;}>span{}div{input{}span{}}}}.right{border-left: 1px solid #ddd;float: left;width: 153px;height: 165px;padding-left: 20px;div{margin-top: 10px;margin-bottom: 10px;}p{font-weight: bold;margin-bottom: 10px;}i{color:#b1191a;font-size: 16px;margin-bottom: 10px;}button{padding: 10px 25px;font-size: 16px;color: #fff;background: #e1251d;border: none;}}}}//选项卡开始.BottomDetail{.tabBtns{background: #ededed;.clearfix();li{border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;background-color: #fff;height: 40px;padding-left: 11px;padding-right: 11px;text-align: center;line-height: 40px;float: left;border-left: 1px solid #ddd;&.active{border-left: 1px solid #ddd;background: red;a{color: #fff;}}&:last-child{border-right: 1px solid #ddd;}}}.tabContains{div{display: none;padding-left: 20px;line-height: 25px;&.active{display: block;margin: 10px 0px;}}}}}}}}//右侧边栏开始 .rightAside{width: 300px;height: 100%;background: #7a6e6e;transition: 0.5s;position: fixed;top: 0px;&.asideClose{right: -294px;}&.asideOpen{right: 0px;}.btns{width: 35px;height: 35px;background: #7a6e6e;border-radius: 5px 0 0 0;left: -35px;position: absolute;background-size:35px 35px ;&.btnsClose{background-image: url(../image/list.png);}&.btnsOpen{background-image: url(../image/list2.png);}}//内容区域.content{width: 294px;background: bisque;position: absolute;left: 6px;top: 0px;bottom: 0px;z-index: 50;will-change: z-index;//侧边导航.navlist{position: absolute;left: -29px;top: 50%;transform: translateY(-50%);z-index: 9999;li{width: 35px;height: 35px;position: relative;left: 0px;p{width: 35px;height: 35px;background-color: #7a6e6e;position: absolute;left: -10px;background-image:url(../image/toolbars.png); }i{opacity: 0px;visibility: hidden;transition: 0.5s;width: 62px;height: 35px;background-color: #7a6e6e;text-align: center;line-height: 35px;position: absolute;left: 29px;top: 0px;}&:hover{p{background-color: pink;}i{opacity: 1px;background-color: pink;left: -72px;visibility: visible;transform: translateX(0);}}}}}}//右侧边栏结束}在index.css中：
创建时不用写直接在index.less中写就行
在clear.less中：
.clearfix(){&::after{clear: both;display: block;content: " ";}
}在clear.css中：
不用写但是要创建