小米移动端页面练习---重点:导航栏点击下箭头内容的切换以及样式,高亮显示的实现
效果图
1.html
<div><header><div class="header-ad"><img src="./images/ad.png" alt="" srcset=""></div><div class="header-two-section"><div class="logo"><div class="logo-img"><img src="./images/icon-header-logo.png" alt=""></div><div class="search"><div class="search-img"><img src="./images/search.png" alt="" srcset=""></div><div class="search-input">搜索商品名称</div></div><div class="user-img"><img src="./images/icon-user.23496a0116.png" alt=""></div></div><div class="hearder-nav"><div class="hearder-five-nav"><div class="hearder-nav-active">推荐</div><div>智能</div><div>电视</div><div>家电</div><div>笔记本</div></div><!-- 全部 --><div class="contaniner"><div class="contaniner-text">全部</div><span class="active">推荐</span><span>智能</span><span>电视</span><span>家电</span><span>笔记本</span></div><div class="hearder-nav-img"><div class="arrow"></div></div></div></div><div class="header-three-section"><div class="three-section-img"><img src="./images/main1.webp" alt="" srcset=""><img src="./images/main2.webp" alt="" srcset=""><img src="./images/main3.webp" alt="" srcset=""><img src="./images/main1.webp" alt="" srcset=""><img src="./images/main2.webp" alt="" srcset=""></div><div class="three-section-img"><img src="./images/main3.webp" alt="" srcset=""><img src="./images/main1.webp" alt="" srcset=""><img src="./images/main2.webp" alt="" srcset=""><img src="./images/main3.webp" alt="" srcset=""><img src="./images/main1.webp" alt="" srcset=""></div></div><div class="line"></div></header><main><div class="main-section"><div class="main-section-img"><img src="./images/a1.webp" alt="" srcset=""></div><div class="main-section-two-img"><img src="./images/a2.webp" alt="" srcset=""><img src="./images/a3.webp" alt="" srcset=""></div></div><div class="line"></div><div class="box"><div class="main-image"><div><img src="./images/a6.jpg" alt="" srcset=""></div><div><div>小米13</div><div>小米13</div><div class="red">¥5999起</div><div class="btn">立即购买</div></div></div><div class="main-image"><div><img src="./images/a6.jpg" alt="" srcset=""></div><div><div>小米1313333</div><div>小米13</div><div class="red">¥5999起</div><div class="btn">立即购买</div></div></div></div></main><footer><div class="footer-section"><div><img src="./images/tarbar.png" alt="" srcset=""></div><div>首页</div></div><div class="footer-section"><div><img src="./images/tarbar.png" alt="" srcset=""></div><div>首页</div></div><div class="footer-section"><div><img src="./images/tarbar.png" alt="" srcset=""></div><div>首页</div></div><div class="footer-section"><div><img src="./images/tarbar.png" alt="" srcset=""></div><div>首页</div></div><div class="footer-section"><div><img src="./images/tarbar.png" alt="" srcset=""></div><div>首页</div></div></footer></div>
2.script
<script>let arrow = document.querySelector('.arrow');let Height = document.querySelector('.header-two-section');let contaniner = document.querySelector('.contaniner')let hearderNav = document.querySelector('.hearder-five-nav')contaniner.style.display = 'none'let flag = true//高亮显示,排他,利用双重forEach,先去除active,再给点击内容单独添加activelet span = document.querySelectorAll('.contaniner span')span.forEach(item => {item.onclick = (e)=>{e.stopPropagation();span.forEach(i=>{i.classList.remove('active')})item.classList.add('active')}});let activeDiv = document.querySelectorAll('.hearder-five-nav div')activeDiv.forEach(item =>{item.onclick = e =>{e.stopPropagation();activeDiv.forEach( i =>{i.classList.remove('hearder-nav-active')})item.classList.add('hearder-nav-active')}})arrow.onclick = function () {if (flag) {flag = falsearrow.classList.add('rotate')Height.classList.add('header-two-height-section')hearderNav.classList.add('hearder-five-nav')hearderNav.style.display = 'none'contaniner.style.display = 'block'} else {arrow.classList.remove('rotate')Height.classList.remove('header-two-height-section')hearderNav.style.display = 'block'contaniner.style.display = 'none'// 将display:none覆盖掉hearderNav.style.display = 'flex' flag = true}}</script>
3.css
* {padding : 0;margin : 0;box-sizing: border-box;
}ul li,
ol li {list-style-type: none;
}.header-ad {width : 100vw;height : 9vh;position: relative;
}.header-ad img {width : 100vw;height: 9vh;
}.header-two-section {position : relative;width : 100vw;height : 13vh;padding : 0 2vw;background: #f2f2f2;}
.header-two-height-section {position : relative;width : 100vw;height : 28vh;padding : 0 2vw;background: #f2f2f2;transition: all .5s;
}.logo {width : 100%;height : 7vh;display : flex;justify-content: center;align-items : center;text-align : center;
}.logo-img {width : 15%;height: 1.625rem;
}.logo-img img {width : 1.625rem;height: 1.625rem;
}.search {width : 70%;height : 2rem;display : flex;border : .0625rem solid #ccc;align-items : center;background-color: white;border-radius : .1875rem;text-align : center;
}.search-img,
.search-img img {width : 1.25rem;height: 1.25rem;
}.search-input {color : #ccc;font-size: .9375rem;
}.user-img {width : 15%;height: 1.625rem;
}.user-img img {width : 1.25rem;height: 1.25rem;
}.hearder-nav {position: relative;width : 100%;/* height : 10vh; */display : flex;justify-content: space-between;align-items : center;}.hearder-five-nav {display : flex;justify-content: space-between;width : 80%;color: #ccc;}/* 导航箭头 */
.hearder-nav-img {/* 导航箭头定位 */position: absolute;width : 21px;height: 21px;right: 13px;top: 3px;
}.hearder-nav-img div {background : url(./images/xiajiantou.png) no-repeat;width : 21px;height : 21px;background-size: 21px 21px;/* 过渡 *//* transform : rotate(0); */transition : transform .2s linear;
}.rotate {transform : rotate(180deg);transition: transform .2s linear;
}
.contaniner{width: 100%;color: gray;}
.contaniner-text{padding-top: 8px;
}
.contaniner span{display: inline-block;width: 75px;height: 30px;border: 1px solid #ccc;border-radius: 3px;text-align: center;line-height: 30px;margin: 10px 10px 0px 0;
}
.nav-display{display: block;
}
.no-display{display: none;
}
.active{background-color: pink;color: white;transform: scale(1.1);transition: transform .5s linear;}
.hearder-nav-active{color: orange;padding-bottom: 10px;border-bottom: 3px solid orange;
}
.header-three-section {width: 100%;
}
.three-section-img {display: flex;
}.three-section-img img {width : 4.6875rem;height: 4.9375rem;
}.line {width : 100%;height : .5rem;background-color: #f2f2f2;
}.main-section {width : 100%;/* height : 20vh; */display : flex;justify-content: space-around;
}.main-section-img {width : 50vw;/* height:16.875rem; */height : 16.625rem;
}.main-section-img img {width : 50vw;/* height:16.875rem; */height : 16.625rem;
}.main-section-two-img {width : 49vw;height : 16.625rem;display : flex;flex-direction : column;justify-content: space-between;
}.main-section-two-img img {width : 11.625rem;height: 8.1875rem;
}.box {display : flex;justify-content: space-between;
}.main-image {width : 100%;padding : 0 1vw;height : 18.75rem;display : flex;/* justify-content: center;align-items : center; */flex-direction : column;text-align : center;
}.main-image img {width : 11.25rem;height: 9.125rem;
}.red {color: red;
}.btn {padding : .3125rem .625rem;background-color: red;color : white;border-radius : .3125rem;
}footer {position : fixed;left : 0;bottom : 0;width : 100%;height : 3.125rem;background-color: white;display : flex;
}.footer-section {width : 25%;display : flex;text-align : center;flex-direction: column;
}.footer-section img {width : 1.3125rem;height: 1.3125rem;}
相关文章:

小米移动端页面练习---重点:导航栏点击下箭头内容的切换以及样式,高亮显示的实现
效果图 1.html <div><header><div class"header-ad"><img src"./images/ad.png" alt"" srcset""></div><div class"header-two-section"><div class"logo"><div c…...

从零开始创建一个项目,springBoot+mybatisPlus+mysql+swagger+maven
一,前提 从零开始创建一个项目,绑定了数据库 用到的技术栈:springBootmybatisPlusmysqlswaggermaven 二,创建项目步骤 1,创建项目 创建出来的项目结构如图所示 2,修改配置文件 因为我比较习惯yml语言&…...
【视点合成】代码解读:生成demo视频
变换工具 def render_3dphoto(src_imgs, # 输入的源图像,维度为 [batch_size, 3, height, width]mpi_all_src, # 输入的所有源图像的MPI,维度为 [batch_size, num_planes, 4, height, width]disparity_all_src, # 所有源图像的视差信息&…...

Process On在线绘制流程图
目录 一.ProcessOn 1.1.介绍 1.2.直接网上使用 二.绘制门诊流程图 三.绘制住院流程图 四.绘制药库采购入库流程图 五.绘制OA会议流程图 今天就到这里了哦!!!希望能帮到你哦!!! 一.ProcessOn 1.1.介绍 ProcessOn(流程&#…...
【Hadoop-OBS-Hive】利用华为云存储对象 OBS 作为两个集群的中间栈 load 文件到 Hive
【Hadoop-OBS-Hive】利用华为云存储对象 OBS 作为两个集群的中间栈 load 文件到 Hive 1)压缩文件2)上传文件到 OBS 存储对象3)crontab 定时压缩上传4)从 obs 上拉取下来文件后解压缩5)判断对应文件是否存在6࿰…...
直线检测算子
hough_lines_dir 接口 hough_lines_dir(ImageDir : HoughImage, Lines : DirectionUncertainty, AngleResolution, Smoothing, FilterSize, Threshold, AngleGap, DistGap, GenLines : Angle, Dist) 参数 in: ImageDir :由边缘检测算子sobel_dir、edge_image获取的…...

如何在本地Docker中部署MinIO服务并实现远程访问管理界面
文章目录 前言1. Docker 部署MinIO2. 本地访问MinIO3. Linux安装Cpolar4. 配置MinIO公网地址5. 远程访问MinIO管理界面6. 固定MinIO公网地址 前言 MinIO是一个开源的对象存储服务器,可以在各种环境中运行,例如本地、Docker容器、Kubernetes集群等。它兼…...
逛商场。。。
题目名字 逛商场 题意 见到想买的物品,只要能买得起,就一定会买下来之后才会继续往前走;如果买不起就直接跳过 思路 接着,它读取数组 aa 的值,并存储在数组中。然后,程序读取一个整数 m。初始化计数器 cn…...

RTrPPG
研究背景 心率 (HR) 和脉搏率变异性 (PRV) 是允许分析心脏行为的两个生理参数。心率监测可以通过接触式和非接触式的两种方法进行。通常用于测量 HR 和 PRV 的两种接触式技术是心电图 (ECG) 和光电容积脉搏波 (PPG)。 ECG 测量由心脏活动引起的电场。另一方面,PPG …...

web应用开发技术的一些概念
一、Servlet 1.Servlet的工作过程: Servelt的工作流程示意图 (1)客户端发起一个Http请求到服务器,请求特定的资源或者是要执行特定的操作 (2)服务器在接收到请求后,根据请求相应的URL将请求分发…...

智能优化算法应用:基于乌燕鸥算法3D无线传感器网络(WSN)覆盖优化 - 附代码
智能优化算法应用:基于乌燕鸥算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于乌燕鸥算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.乌燕鸥算法4.实验参数设定5.算法结果6.参考文…...

超聚变服务器(原华为服务器)网站模拟器
一、超聚变服务器(原华为服务器)网站模拟器: 原来了解服务器可以从他的网站上进行了解,模拟器做的很好了。 https://support.xfusion.com/server-simulators/ 有很多的模拟器,今天主要看下BMC的设置 有很多的在线工具…...

Linux常见压缩指令小结
为什么需要压缩技术 我们都知道文件是以byte作为单位的,如果我们的文件仅仅在低位占一个1 0000 0001这种情况我们完全可以压缩一下,将高位的0全部抹掉即可。 如上所说是一种压缩技术,还有一种就是将1111(此处省略96个)一共100个1࿰…...

OpenSSL的源码在哪里下载?
官方网站去下载,网址: https://www.openssl.org/source/ 比较老的版本的下载页面地址: https://www.openssl.org/source/old/ 由于某面板的OpenSSL模块的安装配置语句如下: --with-openssl/root/rpmbuild/BUILD/openssl-1.0.2u所…...

使用create-react-app脚手架创建react项目
文章目录 1、安装create-react-app脚手架2、创建 React 项目,项目名为 react-demo3、项目创建成功4、使用vscode打开项目并运行5、项目运行成功node_modules:存放项目所依赖的一些第三方包文件public:静态资源文件夹src:源码文件夹其它文件 1…...

【网络安全】网络防护之旅 - 点燃网络安全战场的数字签名烟火
🌈个人主页:Sarapines Programmer🔥 系列专栏:《网络安全之道 | 数字征程》⏰墨香寄清辞:千里传信如电光,密码奥妙似仙方。 挑战黑暗剑拔弩张,网络战场誓守长。 目录 😈1. 初识…...

JVM基础扫盲
什么是JVM JVM是Java设计者用于屏蔽多平台差异,基于操作系统之上的一个"小型虚拟机",正是因为JVM的存在,使得Java应用程序运行时不需要关注底层操作系统的差异。使得Java程序编译只需编译一次,在任何操作系统都可以以相…...

SpringBoot基于gRPC进行RPC调用
SpringBoot基于gRPC进行RPC调用 一、gRPC1.1 什么是gRPC?1.2 如何编写proto1.3 数据类型及对应关系1.4 枚举1.5 数组1.6 map类型1.7 嵌套对象 二、SpringBoot gRPC2.1 工程目录2.2 jrpc-api2.2.1 引入gRPC依赖2.2.2 编写 .proto 文件2.2.3 使用插件机制生产proto相关…...

浏览器的事件循环机制(Event loop)
事件循环 浏览器的进程模型 何为进程? 程序运行需要有它自己专属的内存空间,可以把这块内存空间简单的理解为进程 每个应用至少有一个进程,进程之间相互独立,即使要通信,也需要双方同意。 何为线程? …...

THEMIS---Beta Sprint Summary Essay Blog
Which course does this assignment belong to2301-MUSE社区-CSDN社区云What are the requirements for this assignmentbeta SprintThe goal of this assignmentTo summarize the beta task progress and the teams sprintsTeam NameThemisTop-of-the-line collection of essa…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...

跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...

相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...