从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）

已于 2022-04-19 17:40:01 修改
阅读量536 收藏 5
点赞数
分类专栏： 从零开始学前端 文章标签： 前端 学习 css html
于 2022-03-05 23:32:33 首次发布
本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45266979/article/details/123303315
版权

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：css3新属性scss和less — 今天你学习了吗？（CSS：Day22）

文章目录

前言

本章意在讲解轮播图之前的内容制作，效果图如下，时间有点紧张，所以值附上代码，后期有疑问的话可以进行讲解~

第二十三节课：OPPO商城轮播图

一、官网效果

在这里插入图片描述

二、制作效果

在这里插入图片描述

三、代码

html：

<!DOCTYPE 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>
                        <a
                            href="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>
                        <a
                            href="https://id.opposhop.cn/register.html?callback=https%3A%2F%2Fwww.opposhop.cn%2F&language=zh-CN&channelId=1000343">
                            注册
                        </a>
                        <a
                            href="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. 隐藏文字的三种方法
    1.display:none;
    2.font-size:0;
    3.text-indent: -999px;
  1. 引入文件字体
    @font-face {
    font-family: myfont;
    src: url(../css/文字文件地址);
  1. 消除浮动带来的影响
     1.overflow
     2.额外标签法
     3.伪元素（本文）
  1. 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布局和音频 — 今天你学习了吗？（CSS：Day24）

------还应毫末长，始见拂丹霄。

Coisini_甜柚か
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
oppo商城网页
weixin_43827376的博客
03-25 1254
文章目录项目介绍项目效果项目地址 项目介绍 这是一个纯html+css+js的前端项目，oppo商城。涉及到的主要前端知识有轮播图、吸顶灯、定时器、js等等，原生开发，没有采用流行前端框架。适合新人小白入门学习。 项目效果 项目地址 gitee仓库地址，开源不易，欢迎star ...
OPPO官网页面前端代码
01-10
OPPO官网页面前端代码
仿oppo官网页面，前端初学，html css js.zip
07-13
前端初学者的福利啦，基于html，css，js做的OPPO官网页面源码，有需要的小伙伴可以下载看看哦
oppo商城轮播图-演示和讲解在描述里
03-10
演示地址：https://www.bilibili.com/video/BV1t44y1K7M9/ 文章讲解地址：https://blog.csdn.net/weixin_45266979/article/details/123303315
ups-oppo-push-java-sdk:oppo推java SDK
05-14
OPPO推送服务端 JAVA SDK 中央仓库获取 更新日志 [2018-06-01]V1.0.0.20180605 update OppoClieckType [2018-06-01]V1.0.0.20180601 1.0.0标准版 接口说明 单推-通知栏消息推送（message/notification/unicast） /*...
OPPO手机充电技术--VOOC技术
01-13
　锂电池本来就支持高电流充放，并非OPPO的独创。之前不是也有人用PAD的充电器（2A充电电流限制）给IPHONE充电（IPHONE充电器为1A限制），速度超快的。OPPO号称快安全的手机充电技术--VOOC技术原理到底是什么？以下...
电源技术中的OPPO手机充电技术--VOOC技术
10-20
　锂电池本来就支持高电流充放，并非OPPO的独创。之前不是也有人用PAD的充电器（2A充电电流限制）给IPHONE充电（IPHONE充电器为1A限制），速度超快的。OPPO号称全球最快最安全的手机充电技术--VOOC技术原理到底是...
最新版仿OPPO手机计算器--android.rar
07-30
《仿OPPO手机计算器在Android开发中的实现与学习》 在Android应用开发中，构建一个仿OPPO手机计算器的应用是一项常见的实践任务，它涉及到UI设计、事件处理、数学逻辑等多个方面的技术。本压缩包文件“最新版仿OPPO...
苹果官网小效果
04-03
一个比较炫的js特效，效果是，若干图标一个一个移动，是我非常喜欢的一个小效果
web结课作业的源码——HTML+CSS+JavaScript仿oppo官网手机商城(1页)
qq_38512792的博客
04-10 81
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
html在线商城购物网站制作——基于HTML+CSS+JavaScript(oppo手机商城 6页)
而风不止
11-24 3253
在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
（27）-- 用Bootstrap写的OPPO官网商城
Fredreck1919的博客
01-23 2175
#用Bootstrap写的OPPO官网商城首页 Document body,ul,li{ padding: 0px; margin: 0px; list-style: none; } body{ height: 3000px; padding-top:20px; } .item1,
基于HTML电商项目的设计与实现——html静态网站基于数码类电商购物网站网页设计与实现共计30个页面...
qq_365392777
10-23 3454
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作...
【小程序项目开发-- 京东商城】uni-app开发之轮播图
计算机魔术师的blog
06-22 2450
之所以为了创建分支，也是养成良好的项目开发习惯，这样在开放项目井井有条 也可以跳过本节内容，不影响阅读观感🌹 查看分支（前面有*代表着当前分支） 请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用 官方文档： 按照官方流程，我们首先安装对应包，使用命令行工具cmd进入到项目根目录下 进行初始化一个文件 复制官网的导入命令输入 在入口文件进行相关配置 导入对应包并进行挂载，以及定义 响应拦截器和请求响应器 (在uni-app开发中，尽量都是以uni作为顶级对象）.
一个简单的OPPO商城页面
weixin_52630341的博客
11-23 2015
HTML+css 欢迎来学习 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../css/oppo.css"/> <title></title> <style type="text/css"> * { margin: 0;
HTML+CSS+JS制作商城轮播图
LuWeien的博客
02-04 713
百度网盘下载地址 链接：https://pan.baidu.com/s/1btcsI-hdbJ1O-adVD7J5tg 提取码：d604 国内码云Gitee下载地址（内含超多有趣案例） https://gitee.com/huang_weifu/JavaScript_demo.git 喜欢的老铁们可以点赞收藏喔~
Python中制作输入命令 adb shell getprop | grep clientid 要求输出[ro.com.google.clientidbase]: [android-oppo] [ro.com.google.clientidbase.ms]: [android-oppo-terr1-rso2] [ro.com.google.clientidbase.pg]: [android-oppo-deo2] [ro.com.google.clientidbase.tx]: [android-oppo-terr1-rso2] [ro.com.google.clientidbase.vs]: [android-oppo-terr1-rso2]为正确，相反则为FALSE
最新发布
06-11
你可以使用Python的`subprocess`模块来执行`adb`命令，并对输出结果进行判断。下面是一个示例代码： ```python import subprocess # 执行 adb 命令，获取输出结果 result = subprocess.run(['adb', 'shell', '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coisini_甜柚か

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值