从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（Day23）
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day23）
复习：从零开始学前端：css3新属性scss和less — 今天你学习了吗？（Day22）
文章目录
前言
本章意在讲解轮播图之前的内容制作，效果图如下，时间有点紧张，所以值附上代码，后期有疑问的话可以进行讲解~
第二十三节课：OPPO商城轮播图
一、官网效果
二、制作效果
三、代码
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>Document</title> <link rel="stylesheet" href="../css/style.css"></head><body> <div class="oppo"> <div class="header"> <div class="header blacknav"> <div class="headcenter"> <div class="blacknav-left"> <a href="https://www.oppo.com/cn/">OPPO 官网</a> <a href="https://www.oneplus.com/cn">一加官网</a> </div> <div class="blacknav-right"> <a href="https://www.oppo.com/cn/download-storeapp/?utm_source=opposhopweb&utm_medium=header">下载 OPPO 商城APP<div class="download-code"> <img src="../img/header/QRCode.jpg" alt=""> <div class="QRtxt">扫描下载 OPPO 商城 App</div></div> </a> <ahref="https://id.opposhop.cn/index.html?callback=https%3A%2F%2Fwww.opposhop.cn%2F&language=zh-CN&channelId=1000343"><img src="../img/header/个人头像.png" alt=""><span>登录</span> </a> <ahref="https://id.opposhop.cn/register.html?callback=https%3A%2F%2Fwww.opposhop.cn%2F&language=zh-CN&channelId=1000343">注册 </a> <ahref="https://id.opposhop.cn/index.html?callback=https%3A%2F%2Fwww.opposhop.cn%2F&language=zh-CN&channelId=1000343"><img src="../img/header/购物车空.png" alt=""><span>购物车</span><span>（0）</span> </a> </div> </div> </div> <div class="header whitenav"> <div class="headcenter"> <a href="https://www.opposhop.cn/cn/web/"> <img src="../img/header/logo.png" alt=""> </a> <div class="topic"> <div><a href="https://www.opposhop.cn/cn/web/topic/700100.html">OPPO专区</a></div> <div><a href="https://www.opposhop.cn/cn/web/topic/700200.html">oneplus专区</a></div> <div><a href="https://www.opposhop.cn/cn/web/topic/700300.html">realme专区</a></div> <div><a href="https://www.opposhop.cn/cn/web/topic/700400.html">智能硬件</a></div> <div><a href="https://www.opposhop.cn/cn/web/topic/700500.html">潮流好物</a></div> <div><a href="https://www.opposhop.cn/cn/web/service">服务</a></div> </div> <div class="search"> <input type="text" id="1" placeholder="Find X5 系列"> <label for="1"><img src="../img/header/搜索.png" alt=""> </label> </div> </div> </div> </div> <div class="slideshow"> <a href="https://www.opposhop.cn/cn/web/products/22860.html"></a> <div class="slideshow-center-all"> <ul class="slideshow-left"> <li> <div class="menu-content"><span>热门推荐</span></div> <img src="../img/slideshow/nav-next.png" alt=""> <div class="visible-goods"><div class="goods"> <div class="goods-list"> <h3>热门推荐</h3> <div class="list"> <a href=""> <div class="img"> <img src="../img/goods/1.webp" alt=""> </div> <span>OPPO Find X5</span> </a> <a href=""> <div class="img"> <img src="../img/goods/1.webp" alt=""> </div> <span>OPPO Find X5</span> </a> <a href=""> <div class="img"> <img src="../img/goods/1.webp" alt=""> </div> <span>OPPO Find X5</span> </a> <a href=""> <div class="img"> <img src="../img/goods/1.webp" alt=""> </div> <span>OPPO Find X5</span> </a> </div> </div></div> </div> </li> <li> <div class="menu-content"><span>OPPO</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>一加</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>realme</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>平板/电视</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>智能耳机</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>智能穿戴</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>智美生活</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>原装配件</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>数码周边</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>运动健康</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>生活日用</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>家用电器</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>文创潮玩</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> <li> <div class="menu-content"><span>保障服务</span></div> <img src="../img/slideshow/nav-next.png" alt=""> </li> </ul> </div> </div> </div></body></html>style.less：
// 问题：// 1.header里面，黑白必须加position: relative;才可以不跟随页面滚动；// 2.二维码掩盖在白的背景后面:必须要设置：z-index: 5;body{ margin: 0; background-color: rgb(201, 197, 197); h1,h2,h3,h4,h5,h6,p{ margin: 0; padding: 0; }}.oppo{ .header{ position: fixed; height: 120px; width: 100%; top: 0; z-index: 999; .blacknav{ position: relative; // position: absolute; width: 100%; height: 36px; background-color: black; .headcenter{ .blacknav-left{ float: left; &>a{ margin: 0 10px; } } .blacknav-right{ float: right; &>a{ padding: 0 15px; border-right: 1.6px solid white; &:last-child{padding-right: 0 ;border-right: none; } // QRCode &:nth-child(1){position: relative;z-index: 5; } .download-code{width: 164px;height: 180px;background-color: rgb(255,255,255);position: absolute;display: none;// top: 28px;right: -20px;box-sizing: border-box;border-radius: 5px;padding: 5px 13px;line-height: 23px;&>img{ width: 138px; // 模糊度 // filter: blur(4px); // 灰度 filter: contrast(95%); border: 1.5px solid rgb(243,243,243);}& .QRtxt{ font-size: 13px; color: grey; // 调整字与字之间的间距 letter-spacing: -1px;} } &:hover .download-code{display: block; } } img{ width: 18px; vertical-align: text-bottom; z-index: 5; } } a{ font-size: 12px; color: white; line-height: 36px; text-decoration: none; } } } .whitenav{ // position: absolute; position: relative; width: 100%; height: 84px; background-color: white; z-index: 4; .headcenter{ &>a{ float: left; height: 50px; margin: 17px 10px; img{ height: 50px; } } .topic{ float: left; height: 100%; font-size: 14px; line-height: 84px; width: 800px; display: flex; justify-content: space-around; div a{ color: gray; text-decoration: none; &:hover{color:tomato; } } } .search{ float: right; width: 160px; margin: 24px 10px; background-color: #F6F6F6; height: 36px; border-radius: 25px; box-sizing: border-box; padding: 5px; input{ width: 120px; height: 26px; border-radius: 25px; // 边框线 border: none; // 输入框的聚焦线 outline: none; background-color: #F6F6F6; padding: 0 15px; box-sizing: border-box; } img{ height: 14px; vertical-align: middle; z-index: 5; // width: 14px; } } } } .headcenter{ width: 1264px; height: 100%; // background-color: rgba(247, 190, 116,.5); margin: 0 auto; } } .slideshow{ height: 596px; width: 100%; background-color: pink; margin-top: 120px; position: relative; // z-index: -1; &>a{ display: block; width: 100%; height: 100%; background: url(../img/slideshow/bgimg.jpg) -450px no-repeat ; background-size: cover; box-sizing: border-box; } .slideshow-center-all{ width: 1264px; height: 534px; // background-color: rgba(3, 151, 151,.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; .slideshow-left{ margin: 0; padding: 7px 0; box-sizing: border-box; height: 100%; width: 220px; border-radius: 5px; background-color: white; float: left; list-style-type: none; overflow: hidden; li{ box-sizing: border-box; text-align: left; line-height: 37px; padding: 0 20px; height: 37px; display: flex; justify-content: space-between; // 居中 align-items: center; cursor: pointer; &:hover{ background-color: rgb(243, 243, 243); } .menu-content>span{ font-size: 14px; color: black; opacity: .9; } img{ width: 15px; height: 15px; } .visible-goods{ position: absolute; width: 750px; height: 534px; top: 0; left: 220px; display: none; box-sizing: border-box; padding: 0 0 0 20px; .goods{width: 100%;height: 100%;border-radius: 5px;padding: 0 6px 0 0;// box-sizing: border-box;overflow: hidden;.goods-list{ width: 100%; height: 100%; padding: 20px; overflow: auto; background-color: #fff; &::-webkit-scrollbar{ width: 6px; } &::-webkit-scrollbar-thumb{ border-radius: 5px; background-color: rgb(133,133,133); } &::-webkit-scrollbar-track{ border-radius: 5px; background-color: rgb(240,240,240); } h3{ font-weight: 400; font-size: 15px; } .list{ width: 100%; // height: 400px; // background-color: pink; // 换行 flex-wrap: wrap; display: flex; // 1. justify-content: flex-start; // 2. // align-content: flex-start; // margin: 0 30px 10px 0; &>a{ text-decoration: none; color: black; border-radius: 5px; width: 200px; height: 40px; background-color: #fff; box-sizing: 5px; // 不收缩 flex-shrink: 0; padding: 3px 6px; box-sizing: border-box; display: flex; justify-content: flex-start; transition: .3s; margin: 0 26px 20px 0; .img{ width: 28px; height: 34px; margin-right: 10px; // background-color: teal; img{ height: 34px; width: 28px; } } &:hover{ box-shadow: 0px 2px 7px rgb(146, 146, 146) ; transform: translateY(-2px); } } }} } } &:hover .visible-goods{ display: block; } } } } }}四、知识点
- 隐藏文字的三种方法
1.display:none; 2.font-size:0; 3.text-indent: -999px; - 引入文件字体
@font-face { font-family: myfont; src: url(../css/文字文件地址);- 消除浮动带来的影响
1.overflow 2.额外标签法 3.伪元素（本文）- goods布局中间空一个
1.不要直接用justify-content，直接全部用margin隔开（本文用的方法） 2.grid布局（后面学到）五、代码包
视频演示：
链接：https://www.bilibili.com/video/BV1t44y1K7M9/
csdn资源：
链接：https://download.csdn.net/download/weixin_45266979/84201051
百度网盘资源：
链接：https://pan.baidu.com/s/1XSzb4Wq9s5fycFN2kLQn0A
提取码：f2pa
预习：从零开始学前端：grid布局和音频 — 今天你学习了吗？（Day24）
------还应毫末长，始见拂丹霄。