HTML+CSS、Vue+less+、HTML+less 组件封装实现二级菜单切换样式跑（含全部代码）

一、HTML+CSS二级菜单

请添加图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" type="text/css" href="nav.css" /><script src="bottom.js" defer></script></head><body id="body"><!--大框架--><div class="box"><div class="nav1"><!--横向导航栏--><div id="logo" class="logo"><p><img src="logo.png" width="100px" height="99px" /></p></div><ul><li class="special"><a href="#"> HOME</a></li><li class="special"><a href="#"> PRODUCT </a></li><li class="special"><a href="#"> LOGIN</a></li><li class="special"><a href="#"> ABOUT </a></li><!-- <div id="container"><span style="display: inline-block; width:100px;margin-top:31px ;margin-left: -23px;font-size:x-large;">⚫</span><label class="switch"><input type="checkbox" οnclick="changeMode()"><span class="slider"></span></label><span style="display:inline-block;margin-top:31px;margin-right: -17px;font-size:x-large;width: 100px;">⚪</span></div> --><script>function changeMode() {var element = document.body;element.classList.toggle("dark-mode");}</script></ul><div class="gou"><img src="购物车 (1).png" /></div><div id="container"><!-- <span style="display: inline-block; width:100px;margin-top:31px ;margin-left: -23px;font-size:x-large;">⚫</span> --><label class="switch"><input type="checkbox" onclick="changeMode()" /><span class="slider"></span></label><!-- <span style="display:inline-block;margin-top:31px;margin-right: -17px;font-size:x-large;width: 100px;">🎁</span> --></div><div id="bottom">Back to top</div></div></div></body>
</html>
.box{position: relative;z-index: 20;background-color: #111;
}
.logo{position: absolute;left: 0px;z-index: 40;top: -15px;bottom: 0px;
}
body{height: 3000px;background: #f7f0e9;transition: .4s;margin: 0px;
}ul{list-style-type: none; /*清除无序列表前的小点*/width: 100%;height: 100px;background: #aa9580;margin: 0px;padding-left: 27%;/*左边距，使li看起来在中间*/position: relative;text-align: center;top:0;}
.nav1{position: fixed;width: 100%;background-color: #aa9580;}
li{float: left;width: 15%;height: 50px;padding-right: 0px;margin-right: auto;  /*两个li之间的距离*/background-color: #aa9580;}
a:link,a:visited{ /*鼠标未点击和点击过时的样式*/display: block;color: #FFFFFF;background-color: #aa9580;text-align: center;line-height: 80px; /*li行高*/padding: 10px;text-decoration: none; /*去下划线*/
}
a:hover{ /*鼠标移动到点击位时的样式，active指点击过后的样式*/background-color: #8d7256;
}#bottom { background-color: rgb(129, 192, 242);position: fixed; right: 20px; bottom: 20px; text-align: center;width: 90px; height: 90px; line-height: 90px; color: #fff; border-radius: 50%; display: none; cursor: pointer; } 
#bottom:hover { background-color: rgb(45, 150, 233); }
.special{font-size: 25px;
}
div{display: flex;
}
.gou{height: 50px;margin-left: 0;width: 50px;margin-right: 20px;margin-top: 20px;left: 0px;right: 100px;
}#container{width: 10%;height: 100px;display: flex;position: absolute;right: 0px;left: 1420px;flex-direction:row;justify-content: center;}
.switch{position: absolute;right: 0;display: inline-block;width: 70px;height: 34px;margin-top: 30px;margin-left: 30px;margin-right: 49px;}
.switch input{display: none;
}
.slider{position: absolute; cursor: pointer;top:0;left: 0;right: 0;bottom: 0;background-color: #8d7256;border-radius: 34px;transition: .4s;}
.slider::before{content: '';position: absolute;width:26px;height: 26px;left: 4px;bottom: 4px;/* background-color: #111; */border-radius: 34px;transition: .4s;background-image: url(face-smile-black.png);background-size:27px 27px;}
.input:checked + .slider{background: #dfdbdb;}
input:checked + .slider::before{transform: translateX(34px);background-image: url(face-smile-white.png);}
.dark-mode{background-color: #111;
}
二、HTML+less二级菜单(文章尾部有vscode中less自动编译成css步骤)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="navLess.css" />
</head>
<body><div class="nav"><ul><li><a href="">	主页</a></li><li><a href="">盗梦空间</a></li><li><a href="">沃音乐</a></li><li><a href="">书香沁鼻</a></li></ul></div>
</body>
</html>

.box{position: relative;z-index: 20;background-color: #111;
}
.logo{position: absolute;left: 0px;z-index: 40;top: -15px;bottom: 0px;
}
body{height: 3000px;background: #f7f0e9;transition: .4s;margin: 0px;
}ul{list-style-type: none; /*清除无序列表前的小点*/width: 100%;height: 100px;background: #aa9580;margin: 0px;padding-left: 27%;/*左边距，使li看起来在中间*/position: relative;text-align: center;top:0;}
.nav1{position: fixed;width: 100%;background-color: #aa9580;}
li{float: left;width: 15%;height: 50px;padding-right: 0px;margin-right: auto;  /*两个li之间的距离*/background-color: #aa9580;}
a:link,a:visited{ /*鼠标未点击和点击过时的样式*/display: block;color: #FFFFFF;background-color: #aa9580;text-align: center;line-height: 80px; /*li行高*/padding: 10px;text-decoration: none; /*去下划线*/
}
a:hover{ /*鼠标移动到点击位时的样式，active指点击过后的样式*/background-color: #8d7256;
}#bottom { background-color: rgb(129, 192, 242);position: fixed; right: 20px; bottom: 20px; text-align: center;width: 90px; height: 90px; line-height: 90px; color: #fff; border-radius: 50%; display: none; cursor: pointer; } 
#bottom:hover { background-color: rgb(45, 150, 233); }
.special{font-size: 25px;
}
div{display: flex;
}
.gou{height: 50px;margin-left: 0;width: 50px;margin-right: 20px;margin-top: 20px;left: 0px;right: 100px;
}#container{width: 10%;height: 100px;display: flex;position: absolute;right: 0px;left: 1420px;flex-direction:row;justify-content: center;}
.switch{position: absolute;right: 0;display: inline-block;width: 70px;height: 34px;margin-top: 30px;margin-left: 30px;margin-right: 49px;}
.switch input{display: none;
}
.slider{position: absolute; cursor: pointer;top:0;left: 0;right: 0;bottom: 0;background-color: #8d7256;border-radius: 34px;transition: .4s;}
.slider::before{content: '';position: absolute;width:26px;height: 26px;left: 4px;bottom: 4px;/* background-color: #111; */border-radius: 34px;transition: .4s;background-image: url(face-smile-black.png);background-size:27px 27px;}
.input:checked + .slider{background: #dfdbdb;}
input:checked + .slider::before{transform: translateX(34px);background-image: url(face-smile-white.png);}
.dark-mode{background-color: #111;
}
三、Vue+less
<template><view class="fu-tabs"><view class="fu-tabs-item" v-for="(item,index) in tabs" :key="index" :class="checkedIndex===index?'checked':null" @click="checkHandler(index)">{{ item }}</view></view>
</template><script>export default{props:{tabs:{type:Array,default:()=>[]},checked:{type:Number,default:0}},data(){return{checkedIndex:this.checked}},methods:{checkHandler(index){this.checkedIndex = indexthis.$emit('change',index)}}}
</script><style scoped>page{background-color: #fff;}.fu-tabs{display: flex;margin: 15px;}.fu-tabs-item{padding: 10px;color: #333;box-sizing: border-box;border: 1px solid rgba(222, 222, 222, 1);}.fu-tabs-item:nth-child(1){border-top-left-radius: 4px;border-bottom-left-radius: 4px;}.fu-tabs-item:last-child{border-top-right-radius: 4px;border-bottom-right-radius: 4px;}.checked{color: #1e98d7;border: 1px solid #1e98d7;background-color: #d1eaf7;}
</style>

ps:vscode中less自动编译成css
1.安装插件
在这里插入图片描述
2.点击配置
在这里插入图片描述
在这里插入图片描述

3.点击配置

  "less.compile": {"compress": true, // 是否删除多余空白字符"sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件"out": true, // 如果是true就会生成同级文件"outExt": ".css", // 输出文件的后缀,默认为.css 如果是微信小程序后缀为.wxss}

在这里插入图片描述
4.重启vscode

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/142177.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mysql之正则表达式匹配

mysql之正则表达式匹配

题目&#xff1a; 今天在牛客网看到一道关于数据库正则表达式匹配的问题&#xff0c;发现自己一点不会做。 正则表达式&#xff1a; 一、正则表达式 MySQL 正则表达式通常是在检索数据库记录的时候&#xff0c;根据指定的匹配模式匹配记录中 符合要求的特殊字符串。MySQL 的…
阅读更多...
深圳市宝安区委常委、宣传部部长周学良一行莅临联诚发考察调研

深圳市宝安区委常委、宣传部部长周学良一行莅临联诚发考察调研

11月9日&#xff0c;深圳市宝安区组织开展主题教育“大走访、大座谈、大起底”行动和调查研究、“基层调研服务日”活动。当日上午&#xff0c;区委常委、宣传部部长周学良率调研组莅临联诚发LCF总部考察调研。区委宣传部副部长孙箫韵&#xff0c;区文化广电旅游体育局党组成员…
阅读更多...
Flowable串行流程移动活动

Flowable串行流程移动活动

在Activiti6和Activiti7中跳转节点都要自己实现&#xff0c;Flowable增加了这个功能。 一&#xff1a;简介 串行流程是指简单的一条线的流程&#xff0c;流程中如果包含会签、排它网关也算串行流程。 节点移动有三种方式&#xff1a; 向前移动foreward。向后移动back。直接跳…
阅读更多...
对产品实现折扣服务（对多个异步任务进行流水线操作）

对产品实现折扣服务（对多个异步任务进行流水线操作）

需求&#xff1a;给商品打折 1、根据产品名称返回价格 2、查询商品的折扣率 3、计算新价格 源码清单 Data public class DiscountShop {private final String name;private final Random random;public DiscountShop(String name) {this.name name;random new Random(name…
阅读更多...
1334.阈值距离内邻居最少的城市

1334.阈值距离内邻居最少的城市

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;1334. 阈值距离内邻居最少的城市 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 利用贝尔曼-福德算法计算出每个节点到其余节点的最短距离后对符合条件的计数&#xff0c;返回计数最小且编…
阅读更多...
C#截取范围

C#截取范围

string[] strs new string[]{"1e2qe","23123e21","3ewqewq","4fewfew","5fsdfds"};var list strs[1..2];Range p 0..3;var list strs[Range];
阅读更多...
【Python+requests+unittest+excel】实现接口自动化测试框架

【Python+requests+unittest+excel】实现接口自动化测试框架

一、框架结构&#xff1a; 工程目录 二、Case文件设计 三、基础包 base3.1 封装get/post请求&#xff08;runmethon.py&#xff09; 1 import requests2 import json3 class RunMethod:4 def post_main(self,url,data,headerNone):5 res None6 if header …
阅读更多...
CSS：为什么看起来content-box更合理，但还是经常使用border-box？

CSS：为什么看起来content-box更合理，但还是经常使用border-box？

当我们在进行网页布局时&#xff0c;经常会遇到content-box和border-box这两种盒子模型。虽然content-box看起来更合理&#xff0c;但我们却经常使用border-box。本文将解释为什么会出现这种情况&#xff0c;并详细介绍如何将一个盒子模型变成border-box。 开始 在网页开发中&…
阅读更多...
微服务nacos实战入门

微服务nacos实战入门

注册中心 在微服务架构中&#xff0c;注册中心是最核心的基础服务之一 主要涉及到三大角色&#xff1a; 服务提供者 ---生产者 服务消费者 服务发现与注册 它们之间的关系大致如下&#xff1a; 1.各个微服务在启动时&#xff0c;将自己的网络地址等信息注册到注册中心&#x…
阅读更多...
【科研新手指南4】ChatGPT的prompt技巧 心得

【科研新手指南4】ChatGPT的prompt技巧 心得

ChatGPT的prompt心得 写在最前面chatgpt咒语1&#xff08;感觉最好用的竟然是这个&#xff0c;简单方便快捷&#xff0c;不需要多轮对话&#xff09;chatgpt思维链2&#xff08;复杂任务更适用&#xff0c;简单任务把他弄复杂了&#xff09;机理chatgpt完整咒语1&#xff08;感…
阅读更多...
Vue基础必备掌握知识点-Vue的指令系统讲解(二)

Vue基础必备掌握知识点-Vue的指令系统讲解(二)

Vue指令系统继续讲解 v-for 作用:基于数据进行循环&#xff0c;多次渲染整个元素 数据类型:数组.对象.数字。。。 遍历数组语法&#xff1a;v-for"(item,index)" in 数组 item:表示每一项 index:则是表现下标 注意:v-for中的key值&#xff0c;key属性唯一的…
阅读更多...
探秘亚马逊云科技海外服务器 | 解析跨境云计算的前沿技术与应用

探秘亚马逊云科技海外服务器 | 解析跨境云计算的前沿技术与应用

目录 一、什么是海外服务器 二、不同主流海外云服务器对比 三、海外服务器的创建(亚马逊为例) 四、个人总结 一、什么是海外服务器 亚马逊云科技海外服务器&#xff1a;指的是部署在世界各地的亚马逊数据中心中的服务器设备。这些服务器提供了计算、存储、数据库、网络等各…
阅读更多...
μC/OS-II---信号量管理1（os_sem.c）

μC/OS-II---信号量管理1（os_sem.c）

目录 信号量管理信号量创建信号量删除获取/等待信号量发出信号量 信号量管理 信号量创建 OS_EVENT *OSSemCreate (INT16U cnt) {OS_EVENT *pevent; #if OS_CRITICAL_METHOD 3u /* Allocate storage for CPU status register */OS_CPU_SR cp…
阅读更多...
【SA8295P 源码分析 (三)】123 - MAX96712 解串器 sensor_detect_device_channels() 探测 Camera Sensor加串器 过程详细解析

【SA8295P 源码分析 (三)】123 - MAX96712 解串器 sensor_detect_device_channels() 探测 Camera Sensor加串器 过程详细解析

【SA8295P 源码分析】123 - MAX96712 解串器 sensor_detect_device_channels 探测 Camera Sensor加串器 过程详细解析 一、sensor_detect_device()：MAX96712 检测解串器芯片是否存在，获取chip_id、device_revision二、sensor_detect_device_channels() ：MAX96712 解串器 寄存…
阅读更多...
mysql子查询

mysql子查询

1、概念 子查询就是将一个查询&#xff08;子查询&#xff09;的结果作为另一个查询&#xff08;主查询&#xff09;的数据来源或判断条件的查询。 2、分类 按查询结果的行列数 标量子查询&#xff1a;结果只有一行一列列子查询&#xff1a;结果只有一列多行&#xff0c;也称…
阅读更多...
vue通过span-method合并列之后，合并列显示在中间位置，根据鼠标滑动跟随展示

vue通过span-method合并列之后，合并列显示在中间位置，根据鼠标滑动跟随展示

当vue通过span-method合并列之后&#xff0c;出现的合并列显示在中间位置&#xff0c;但是如果页面没有分页&#xff0c;如何进行展示呢&#xff0c;难道要滑到最下面去看吗&#xff0c;下面我们来根据鼠标滑动跟随展示 没有处理的合并页面 <template> <el-table:dat…
阅读更多...
智能穿戴AR眼镜主板方案定制_MTK平台AR智能眼镜PCB板开发

智能穿戴AR眼镜主板方案定制_MTK平台AR智能眼镜PCB板开发

AR智能眼镜&#xff0c;是采用了多种技术实现增强现实效果&#xff0c;是将虚拟信息和现实场景相结合的智能设备。 AR智能眼镜硬件上&#xff0c;包括多个传感器、显示装置和处理器等。其中&#xff0c;传感器用于捕捉用户的动作和环境信息&#xff0c;如摄像头、陀螺仪、加速…
阅读更多...
Hadoop入门——数据分析基本步骤

Hadoop入门——数据分析基本步骤

文章目录 1.概述2.分析步骤2.1第一步 明确分析目的和思路2.2第二步 数据收集2.3第三步 数据处理2.4第四步 数据分析2.5第五步 数据展现2.6第六步 报告撰写 3.总结 1.概述 2.分析步骤 2.1第一步 明确分析目的和思路 2.2第二步 数据收集 2.3第三步 数据处理 2.4第四步 数据分析 …
阅读更多...
Phar 文件上传以及反序列化

Phar 文件上传以及反序列化

1.phar反序列化 触发条件&#xff1a; 1、能将phar文件上传 2、可利用函数 stat、fileatime、filectime、file_exists、file_get_contents、file_put_contents、file、filegroup、fopen、fileinode、filemtime、fileowner、fileperms、is_dir、is_executable、is_file、is_link…
阅读更多...
BEVFormer 论文阅读

BEVFormer 论文阅读

论文链接 BEVFormer BEVFormer&#xff0c;这是一个将Transformer和时间结构应用于自动驾驶的范式&#xff0c;用于从多相机输入中生成鸟瞰&#xff08;BEV&#xff09;特征利用查询来查找空间/时间&#xff0c;并相应地聚合时空信息&#xff0c;从而为感知任务提供更强的表示…
阅读更多...
最新文章

Copyright @ 2022~2023