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 = index
				this.$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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Tcl语言：基础入门（一）

Tcl语言：基础入门（一）

Tcl语言https://blog.csdn.net/weixin_45791458/category_12488978.html?spm1001.2014.3001.5482 Tcl语言是一种脚本语言&#xff0c;类似于Bourne shell(sh)、C shell&#xff08;csh&#xff09;、Bourne-Again Shell(bash)等UNIX shell语言。Shell程序主要作为胶水缝合其他…
阅读更多...
【CocoaPods安装环境和流程以及各种情况】

【CocoaPods安装环境和流程以及各种情况】

CocoaPods 环境HomebrewRubyrbenvRubyGems 和 Bundler安装Ruby管理Ruby更新Ruby替换Ruby镜像方式1方式2 CocoaPods安装CocoaPodsCocoaPods使用安装的一些问题单元测试引用问题 参考的链接 环境 Homebrew $ brew --config *可以发现打印有下面一行&#xff1a; Homebrew Ruby: …
阅读更多...
spring基础，编写第一个程序

spring基础，编写第一个程序

spring基础 前言SpringSpring概述Spring的8大模块Spring特点学习spring6软件版本Spring的入门程序第一个Spring程序 小结 前言 控制反转&#xff0c;是面向对象编程中的一种设计思想&#xff0c;可以用来降低代码之间的耦合度&#xff0c;符合依赖倒置原则。 控制反转的核心是…
阅读更多...
AI：71-基于深度学习的植物叶片识别

AI：71-基于深度学习的植物叶片识别

🚀 本文选自专栏：AI领域专栏 从基础到实践，深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家，通过案例和项目实践，掌握核心概念和实用技能。每篇案例都包含代码实例，详细讲解供大家学习。 📌📌📌在这个漫长的过程，中途遇到了不少问题，但是…
阅读更多...
【C++】C++中的IO流

【C++】C++中的IO流

文章目录 一、C语言的输入与输出二、什么是流三、CIO流1.C标准IO流2.C文件IO流 四、stringstream的简单介绍 一、C语言的输入与输出 C语言中我们用到的最频繁的输入输出方式就是scanf ()与printf(): scanf(): 从标准输入设备(键盘)读取数据&#xff0c;并将值存放在变量对应的…
阅读更多...
关于VUE启动内存溢出

关于VUE启动内存溢出

安装node v10.14.2 后 启动公司的VUE项目 使用命令npm run dev 命令 报错&#xff1a; <--- Last few GCs --->[20940:00000244699848E0] 215872 ms: Scavenge 1690.2 (1836.4) -> 1679.6 (1836.4) MB, 5.4 / 0.7 ms (average mu 0.266, current mu 0.253) a…
阅读更多...
【算法 | 模拟No.4】AcWing 756. 蛇形矩阵 AcWing 40. 顺时针打印矩阵

【算法 | 模拟No.4】AcWing 756. 蛇形矩阵 AcWing 40. 顺时针打印矩阵

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【AcWing算法提高学习专栏】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&a…
阅读更多...
区块链技术在跑腿服务中的应用与App系统开发

区块链技术在跑腿服务中的应用与App系统开发

区块链技术为跑腿服务App系统带来了新的可能性&#xff0c;如支付安全、合同自动化、透明性等。本文将介绍如何在一个简单的跑腿服务App系统中应用区块链技术。 智能合约 智能合约是区块链的核心概念之一。它是在区块链上运行的自动化合同&#xff0c;可以自动执行、管理和验…
阅读更多...
【数字通信原理】第六章 频带传输及调制原理

【数字通信原理】第六章 频带传输及调制原理

第六章 数字频带传输系统 1. 二进制数字调制&#xff0c;解调原理:2ASK,2FSK 2.二进制数字调制&#xff0c;解调原理:2PSK,2DPSK 3.二进制数字已调信号的功率谱 3. 二进制数字调制系统的抗噪声性能
阅读更多...
HTML和CSS入门学习

HTML和CSS入门学习

目录 一.HTML 二.CSS 1.CSS作用&#xff1a;美化页面 2.CSS语法 【1】CSS语法规范 【2】如何插入样式表 3.CSS选择器 4.CSS设置样式属性--设置html各种标签的属性 【1】文本属性--设置整段文字的样式 【2】字体属性--设置单个字的样式 【3】链接属性--设置链接的样式…
阅读更多...
全景房屋装修vr可视化编辑软件功能及特点

全景房屋装修vr可视化编辑软件功能及特点

VR样板间、VR景观、VR商业街&#xff0c;全方位展示建筑内外空间使用及功能表現&#xff0c;让目标客戶能够身临其境体验項目的每处细节。 同时支持微信传播&#xff0c;线上看房&#xff0c;手机端VR沉浸式体验 3D互动售楼系统 3D互动售楼系统&#xff0c;集项目展示、智能选房…
阅读更多...
ESP8266 WiFi模块快速入门指南

ESP8266 WiFi模块快速入门指南

ESP8266是一种低成本、小巧而功能强大的WiFi模块&#xff0c;非常适合于物联网和嵌入式系统应用。本指南将为您提供关于ESP8266 WiFi模块的快速入门步骤和基本知识。 第一步&#xff1a;硬件准备 首先&#xff0c;您需要将ESP8266 WiFi模块与您的开发板连接。通常情况下&#…
阅读更多...
【计算机网络基础实验】实验二 有线IP互通网络实践

【计算机网络基础实验】实验二 有线IP互通网络实践

任务一 IP路由协议实现企业路由器通信 目录如下&#xff1a; 任务一 IP路由协议实现企业路由器通信2.1.1 任务描述2.1.2 任务目的2.1.3 任务实施实验需求实验步骤步骤1&#xff1a;更改每台设备的名称步骤2&#xff1a; 给R1接口配置相应IP地址步骤3&#xff1a; 给R2接口配置相…
阅读更多...
使用 Wireshark 抓包工具快速分析 IoT 物联网终端设备的网络通信行为

使用 Wireshark 抓包工具快速分析 IoT 物联网终端设备的网络通信行为

当你进行 IoT 物联网开发过程中&#xff0c;终端-MQTT 服务器-业务系统-App 全链路联调时往往难以快速定位问题&#xff1a;终端可能未正常发出消息报文&#xff0c;也可能在网络传输中丢失&#xff0c;也可能被 MQTT 服务器限流丢弃&#xff0c;或者业务系统处理异常而丢失。此…
阅读更多...
Java9新增特性

Java9新增特性

特性列表 模块化系统&#xff1a;Java 9引入了模块化系统&#xff0c;将代码划分为模块&#xff0c;以更好地组织和管理代码。新的日期和时间API&#xff1a;Java 9引入了新的日期和时间API&#xff0c;使得处理日期和时间变得更简单、更强大。HTTP/2支持&#xff1a;Java 9引…
阅读更多...
Vue3全局共享数据

Vue3全局共享数据

目录 1&#xff0c;Vuex2&#xff0c;provide & inject2&#xff0c;global state4&#xff0c;Pinia5&#xff0c;对比 1&#xff0c;Vuex vue2 的官方状态管理器&#xff0c;vue3 也是可以用的&#xff0c;需要使用 4.x 版本。 相对于 vuex3.x&#xff0c;有两个重要变…
阅读更多...
springboot中定时任务cron不生效，fixedRate指定间隔失效，只执行一次的问题

springboot中定时任务cron不生效，fixedRate指定间隔失效，只执行一次的问题

在调试计算任务的时候&#xff0c;手动重置任务为初始状态&#xff0c;但是并没有重新开始计算&#xff0c;检查定时任务代码&#xff1a; 从Scheduled(fixedRate 120000)可以看到&#xff0c;应该是间隔120秒执行一次该定时任务&#xff0c;查看后台日志&#xff0c;并没有重…
阅读更多...
让深度神经网络绘画以了解它们是如何工作的

让深度神经网络绘画以了解它们是如何工作的

一、说明 深度学习如此有效&#xff0c;这真是一个谜。尽管有一些关于深度神经网络为何如此有效的线索&#xff0c;但事实是没有人完全确定&#xff0c;并且深度学习的理论理解是一个非常活跃的研究领域。 在本教程中&#xff0c;我们将以一种不寻常的方式触及问题的一个小方面…
阅读更多...
Unity Mirror学习（一） SyncVars属性使用

Unity Mirror学习（一） SyncVars属性使用

官网中所说的网络对象&#xff0c;指的是挂了 NetworkIdentity组件的对象 官网中所说的玩家对象&#xff0c;指的是NetworkManager脚本上的PlayerPrefab预制体 这个概念对阅读官网文档很重要&#xff0c;我刚开始并不理解&#xff0c;走了歪路 SyncVars&#xff08;同步变量&a…
阅读更多...
如何在JVS低代码表单配置中实现数据的高效管理？

如何在JVS低代码表单配置中实现数据的高效管理？

在数字化时代&#xff0c;表单已经成为企业、机构和个人收集、整理、分析数据的重要工具。然而&#xff0c;随着数据复杂性的增长&#xff0c;传统的单一表单往往难以满足需求。JVS低代码表单引擎中子表格允许在主表单中嵌套另一个子表数据&#xff0c;使得数据的收集和组织更加…
阅读更多...
最新文章

Copyright @ 2022~2023