【考拉海购网站】之【商品栏及右侧垂直导航】

商品栏及右侧垂直导航效果如图所示 >>>

第一步，页面布局分布情况分析

总共分为3个部分 :
（1）头号商品展示栏
（2）商品栏
（3）右侧垂直导航栏（这里有个细节之处，右侧垂直导航栏是锚定标签）

第二步，根据页面布局写相应的html标签

这里有个细节之处，就是4张头条商品展示栏的a标签，官网中是以一张很长的图片做为底面层，然后用超链接做的表面层，具体分析及写法如下：
这里我采用CSS3的flex属性进行定义，这样可以很快做到对4个a标签的快速均匀部署

(头号商品展示栏html代码)

<!-- 商品展示栏部分 --><div class="goodsDisplay"><!-- 头号商品展示栏 --><div class="promise"><div class="promiseText"><p> <span>考拉承诺</span><span>|</span><span>正品保障</span></p><img src="./5bf7a8d8-ad7b-44db-9402-e5699b22dd4e_480_22.jpg" alt=""><a href=""><span class="rightSpan">12项正品保障措施 ></span></a></div></div><div class="topTitleImg"><img src="./8b9144b3-228a-4904-8239-7f821fab2df8T19010211539_1000_296.webp" alt=""><div class="aHref"><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div></div><div class="shopTitle">★口碑爆款★</div></div>

(头号商品展示栏html代码)

关于如何写出25个商品的 li

            <div class="goodsList"><ul><a href=""><li><div class="goods"><img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt=""><span class="leftTop">热销</span><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li><li><div class="goods"><img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt=""><span class="leftTop">热销</span><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li><li><div class="goods"><img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt=""><span class="leftTop">热销</span><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li><li><div class="goods"><img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt=""><span class="leftTop">热销</span><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li><li><div class="goods"><img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt=""><span class="leftTop">热销</span><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li></a></ul></div>

动态演示效果如下 >>>

然后将html代码依次复制后粘贴即可实现大量的商品布局
特别注意，因为层叠级别的显示问题，为了无遮挡地正常显示 li 商品栏，请配合以下JS代码使用 ! ! !

//---------------商品栏部分----------------------
const goodsLi = document.getElementsByClassName('goodsList')[0].getElementsByTagName('li');
for (let i = 0; i < goodsLi.length; i++) {goodsLi[i].onmouseover = function () {for (let i = 0; i < goodsLi.length; i++) {goodsLi[i].style.zIndex = 1;}this.style.zIndex = 9999;console.log(this);}
}

第三步，右侧导航栏

右侧导航栏的结构不算复杂，就是一个ul设置取消默认的样式后，对每个li设置红色底色，白色字体，微调字体的间距后即可实现，细节之处在于每个 li 由 a 标签包裹，点击a标签会根据 href 寻找指定的锚链接，页面跳转到指定的位置

两个重要细节需要实现 >>>
（1）右侧导航条到达一定垂直位置后会消失和出现

（2）点击右侧导航栏的 li 时，被点击后的 li 会变成暗红色
这里面所有的js控制代码都在index.js里面写好了注释

全部代码

index.html文件代码

   <!-- 商品展示栏部分 --><div class="goodsDisplay"><!-- 头号商品展示栏 --><div class="promise"><div class="promiseText"><p> <span>考拉承诺</span><span>|</span><span>正品保障</span></p><img src="./5bf7a8d8-ad7b-44db-9402-e5699b22dd4e_480_22.jpg" alt=""><a href=""><span class="rightSpan">12项正品保障措施 ></span></a></div></div><div class="topTitleImg"><img src="./8b9144b3-228a-4904-8239-7f821fab2df8T19010211539_1000_296.webp" alt=""><div class="aHref"><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div></div><div class="shopTitle">★口碑爆款★</div><div class="goodsList"><ul><!-- 第一行商品展示 --><a href=""><li><div class="goods"><img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt=""><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li></a><a href=""><li><div class="goods"><img src="./29b864ef1ff045b19a3f5677b9fd7c02_800_800.webp" alt=""><span class="leftTop">热销</span><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li></a><a href=""><li><div class="goods"><img src="./b400fa0e49214c9fa3152bf72063ef221543987209869jpaq4bl310678.webp" alt=""><span class="leftTop">热销</span><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li></a><a href=""><li><div class="goods"><img src="./b400fa0e49214c9fa3152bf72063ef221543987209869jpaq4bl310678.webp" alt=""><span class="leftTop">热销</span><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li></a><a href=""><li><div class="goods"><img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt=""><span class="leftTop">热销</span><span class="leftBottom">新人专享</span><h3><a><p>【2件装】Jmsolution 珍珠全身防水防晒隔离喷雾SPF50 180毫升</p></a></h3><p class="describe">无惧夏日暴晒的秘密武器</p><div class="value"><span style="margin-left: 6px;">¥</span><spanstyle="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span><del>¥228</del><a href="">立即购买</a></div></div></li></a><!-- 第二行商品展示 -->...参考 第一行商品展示 进行复制，此处略...<!-- 第三行商品展示 -->...参考 第一行商品展示 进行复制，此处略...<!-- 第四行商品展示 -->...参考 第一行商品展示 进行复制，此处略...<!-- 第五行商品展示 --></ul></div><br></div><!-- 右侧导航栏 --><ul class="rightNav"><a href=""><li style="height: 34px;line-height: 34px;"><span id="oneCar"></span><span>购物车</span></li></a><a href=""><li>★口碑爆款★</li></a><a href=""><li>99元任选2件</li></a><a href=""><li>大牌满减</li></a><a href=""><li>美容彩妆</li></a><a href=""><li>家居个护</li></a><a href=""><li>母婴儿童</li></a><a href=""><li>美食保健</li></a><a href=""><li>工厂店精选</li></a><a href="#top"><li style="height: 34px;line-height: 34px;"><span id="oneUp"></span><span>TOP</span></li></a></ul>

index.css文件代码

/* -------------------------商品展示栏-------------------------- */
.goodsDisplay {width: 1090px;height: 800px;background-color: rgb(255, 255, 255);
}/* 商品承诺 */
.promise {position: relative;width: 992px;height: 90px;background-color: red;padding: 4px;margin-bottom: 10px;
}/* 官方商品防假承诺文本 */
.promise .promiseText {position: absolute;width: 99%;height: 90px;background-color: #fff;border-radius: 6.4px;
}.promiseText p {position: absolute;display: block;top: -10px;left: 18px;font-size: 20px;font-weight: 600;color: red;height: 24px;width: 400px;
}.promiseText .rightSpan {position: absolute;width: 176px;height: 20px;top: 24px;right: 18px;font-size: 16px;line-height: 20px;padding: 10px;text-align: center;color: #fff;border-radius: 24px;background-color: red;
}.promiseText img {position: absolute;left: 18px;bottom: 18px;
}.shopTitle {width: 1000px;height: 60px;text-align: center;line-height: 60px;font-size: 28px;color: rgb(255, 255, 255);background-color: rgb(227, 20, 54);margin-top: 6px;margin-bottom: 12px;
}/* 头号商品的设置，这里的头号商品指的是商品栏上面那4个图案，被指定的横向图案 */
.topTitleImg .aHref {display: flex;width: 986px;margin-top: -302px;
}/* 用flex属性平均分配超链接，浮动在头号的4个商品上，方便点击跳转 */
.topTitleImg .aHref a {display: block;flex: 1;height: 296px;margin-left: 14px;
}/* 针对第一个头号商品进行单独设置，为了方便整个头号商品居中 */
.topTitleImg .aHref a:first-child {margin-left: 10px;
}/* 商品列表 */
.goodsList {position: relative;width: 1000px;height: 1536px;margin-top: -12px;background-color: rgb(240, 240, 240);
}.goodsList ul {margin-left: -40px;
}.goodsList ul li {display: block;float: left;position: relative;height: 279px;width: 190px;background-color: #fff;margin-top: 10px;margin-bottom: 16px;margin-left: 8px;
}/* 对单个商品进行指定 */
.goodsList ul li .goods {height: 296px;background-color: #fff;border: 1px solid transparent;background-color: inherit;transition: all 0.2s ease;
}/* 单个商品左上角的红色小标签 */
.goodsList ul li .leftTop {display: block;position: absolute;top: 0;margin-top: 1px;margin-left: -1px;width: fit-content;height: 20px;padding: 0 5px 0 3px;color: #fff;font-size: 12px;line-height: 20px;background-color: #ff8385;z-index: 1;
}/* 单个商品左下角的小标签 */
.goodsList ul li .leftBottom {display: block;position: absolute;height: 15px;left: 8px;border: 1px solid #e31436;border-radius: 3px;background: #fff;color: #e31436;font-size: 12px;line-height: 15px;
}/* 商品名字 */
.goodsList ul li h3 {display: block;height: auto;width: 180px;white-space: nowrap;text-overflow: ellipsis;margin-top: 4px;margin-left: 4px;overflow: hidden;
}/* 鼠标移动到商品栏后，相应的商品显示商品名字，这里用的是white-space属性让标题全部显示 */
.goodsList ul li:hover .goods {height: 338px;border: 1px solid red;white-space: normal;
}.goodsList ul li:hover p {white-space: normal;
}.goodsList ul li h3:hover p {cursor: pointer;text-decoration: underline;
}.goodsList ul li img {width: 100%;
}/* 单个的商品描述文字 */
.goodsList ul li .describe {color: #666;margin-left: 4px;margin-top: -24px;
}/* 单个商品的价格，采用大红色显示 */
.goodsList ul li .value {position: relative;color: rgb(227, 20, 54);background-color: #fff;line-height: 22px;margin-bottom: 14px;z-index: 9999;
}.goodsList ul li .value a {display: block;float: right;width: fit-content;height: 24px;margin-right: 4px;bottom: 14px;padding: 0 6px;border-radius: 3px;background: #e31436;color: #fff;font-size: 12px;line-height: 24px;text-align: center;
}/* 商品原价格，这是文字划线，一般用于打折吸引客服 */
.goodsList ul li .value del {color: #999;
}/* 右侧导航栏 */
ul.rightNav {position: fixed;right: 60px;top: 30vh;width: 128px;z-index: 9999;
}/* 右侧导航栏的li属性设置 */
ul.rightNav li {display: block;list-style: none;width: 100px;line-height: 30px;height: 30px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;text-align: center;color: #fff;background-color: #f03048;border-bottom: 1px solid rgba(0, 0, 0, 0.2);cursor: pointer;z-index: 100px;
}/* 单鼠标移动到右侧导航栏的指定 li 上时，底色显示为暗红色 */
ul.rightNav li:hover {background-color: rgb(175, 36, 52);
}/* 右侧导航条的第一个li是购物车 */
#oneCar {display: block;float: left;margin-left: 18px;margin-top: 5px;width: 20px;height: 20px;background-size: 20px 21px;background-image: url('./购物车_1.png');
}/* 购物车 */
#oneCar+span {margin-left: -20px;
}/* 右侧导航栏最后一个li是上箭头 */
#oneUp {display: block;margin-left: 40px;margin-top: 0px;width: 20px;height: 16px;background-size: 20px 21px;background-image: url('./上箭头.png');
}#oneUp+span {display: block;line-height: 16px;
}

index.js文件代码

//---------------商品栏部分----------------------
const goodsLi = document.getElementsByClassName('goodsList')[0].getElementsByTagName('li');
for (let i = 0; i < goodsLi.length; i++) {goodsLi[i].onmouseover = function () {for (let i = 0; i < goodsLi.length; i++) {goodsLi[i].style.zIndex = 1;}this.style.zIndex = 9999;}
}//--------------右侧导航栏部分-------------------
// 获取右侧导航栏对象
const rightNav = document.getElementsByClassName('rightNav')[0];
window.onscroll = function () {// scrollTop表示滚动后距离顶端多少// 当距离页面顶端大于799px的距离时会出现右侧导航栏，否则右侧导航条会消失if (document.documentElement.scrollTop >= 799) {rightNav.style.display = "block";} else {rightNav.style.display = "none";}
}//点击右侧导航栏后被点击的相应li会变暗红色
const rightNavLi = document.querySelectorAll('.rightNav li');
for (let i = 0; i < rightNavLi.length; i++) {rightNavLi[i].onclick = function () {// 遍历当前所有的右侧导航栏 li ,然后设置为红色for (let i = 0; i < rightNavLi.length; i++) {rightNavLi[i].style.backgroundColor = '#f03048';}// 设置所点击的对象底色为红色this.style.backgroundColor = 'rgb(175, 36, 52)';}
}

最终效果截图

下一节：CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底信息，网站备案信息】

电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】相关推荐

电商项目实战第六节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底信息，网站备案信息】
上一节:电商项目实战第五节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[商品栏及右侧垂直导航] 文章目录电商项目实战第六节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[页 ...
电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
前端电商项目实战，如何从 0 开始创造一个【考拉海购官网】？（共6节教程）
文章目录声明一,关于页面还原度效果比较二,第一组演示图是考拉海购官网的三,第二组演示图是本次教程从0开发的四,教程目录(共6节) 五,全部代码下载地址新手提示 (1)如何从github ...
电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】
文章目录 [考拉海购网站]之[顶部导航] 第一步,分析布局第二步,建立基本的文本目录及文件第三步,根据第一步对导航栏的分析,在html代码里面补全需要的标签 index.html文件代码第四步, ...
电商项目实战第二节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【搜索框那一栏】
上一节:电商项目实战第一节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[顶部导航] 文章目录 [考拉海购网站]之[搜索框那一栏] 第一步,分析布局第二步,在html代码里面补全需要的标 ...
电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】
上一节:电商项目实战第二节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[搜索框那一栏] 文章目录 [考拉海购网站]之[分类导航栏] 第一步,分析页面布局第二步,写需要的html标签 i ...
拓荒会员电商“无人区”，考拉海购能否拿下“新船票”？
文 | 陈小江来源 | 螳螂财经(ID:TanglangFin) 考拉海购"变"了. 近日,考拉海购宣布战略升级--在现有跨境业务基础上All in会员电商.这是考拉融入阿里经济 ...
网易考拉海购更名网易考拉全面进军综合电商市场
近日,国内领先的跨境进口零售电商平台网易考拉海购宣布更名为"网易考拉",正式宣告进军综合电商市场.与品牌更名同步,"网易考拉"全新的品牌标识及全新Slogan ...
400集高并发分布式超级电商项目实战
带走一盏渔火让他温暖我的双眼留下一段真情让它停泊在枫桥边久违的你一定保存着那套网盘许多年以后躺在网盘里的视频依然尘封未动涛声依旧不见当初的夜晚今天的你我怎样重复昨天的故事涛哥说 ...

电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】

文章目录

【考拉海购网站】之【商品栏及右侧垂直导航】

第一步，页面布局分布情况分析

第二步，根据页面布局写相应的html标签

(头号商品展示栏html代码)

(头号商品展示栏html代码)

第三步，右侧导航栏

全部代码

index.html文件代码

index.css文件代码

index.js文件代码

最终效果截图

电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】相关推荐

最新文章

热门文章