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

news2024/11/26 4:34:48
一、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

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

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

相关文章

蓝桥杯国一，非ACMer选手保姆级经验分享

蓝桥杯国一，非ACMer选手保姆级经验分享

目录 一、前言二、蓝桥杯简介三、0基础计算机新手小白&#xff0c;赛前如何准备提高自己的获奖率&#xff1f;3.1 每两周参加一次【蓝桥算法双周赛】3.2 多练真题3.3 参加每一场官方校内模拟赛 四、结语 一、前言 hello&#xff0c;大家好&#xff0c;我是大赛哥(弟)&#xff…
阅读更多...
2023.11-9 hive数据仓库,概念,架构

2023.11-9 hive数据仓库,概念,架构

目录 一.HDFS、HBase、Hive的区别 二.大数据相关软件 三. Hive 的优缺点 1&#xff09;优点 2&#xff09;缺点 四. Hive 和数据库比较 1&#xff09;查询语言 2&#xff09;数据更新 3&#xff09;执行延迟 4&#xff09;数据规模 五.hive架构流程 六.MetaStore元…
阅读更多...
Could not load library libcudnn_cnn_train.so.8, 解决类似问题的思路与方法

Could not load library libcudnn_cnn_train.so.8, 解决类似问题的思路与方法

完整报错 Could not load library libcudnn_cnn_train.so.8. Error: /home/ai/anaconda3/envs/ai/bin/../lib/libcudnn_ops_train.so.8: undefined symbol: _ZN5cudnn3ops26JoinInternalPriorityStreamEP12cudnnContexti, version libcudnn_ops_infer.so.8 错误原因 该错误其…
阅读更多...
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程序主要作为胶水缝合其他…
阅读更多...
[100天算法】-定长子串中元音的最大数目（day 67）

[100天算法】-定长子串中元音的最大数目（day 67）

题目描述 给你字符串 s 和整数 k 。请返回字符串 s 中长度为 k 的单个子字符串中可能包含的最大元音字母数。英文中的 元音字母 为&#xff08;a, e, i, o, u&#xff09;。示例 1&#xff1a;输入&#xff1a;s "abciiidef", k 3 输出&#xff1a;3 解释&#xf…
阅读更多...
Excel和Chatgpt是最好的组合。

Excel和Chatgpt是最好的组合。

内容来源&#xff1a;bitfool1 Excel和Chatgpt是最好的组合。 您可以轻松地自动化数据处理。 我向您展示如何在不打字公式的情况下将AI与Excel一起使用&#xff1a; 建立chatgpt 主要目的是使用Chatgpt自动编写Excel宏。 这消除了键入公式的需求&#xff0c;并让您在自然语言…
阅读更多...
53基于matlab的Tamura纹理特征提取

53基于matlab的Tamura纹理特征提取

基于matlab的Tamura纹理特征提取&#xff0c;包括粗糙度、对比度、方向度、线性度、规则度、粗糙度六种&#xff0c;可替换自己的数据进行特征提取。程序已调通&#xff0c;可直接运行。 53 方向度、线性度、规则度 (xiaohongshu.com)
阅读更多...
axios请求的问题

axios请求的问题

本来不想记录&#xff0c;但是实在没有办法&#xff0c;因为总是会出现post请求&#xff0c;后台接收不到数据的情况,还是记录一下如何的解决的比较好。 但是我使用export const addPsiPurOrder data > request.post(/psi/psiPurOrder/add, data); 下面是封装的代码。后台接…
阅读更多...
系列一、Shiro概述

系列一、Shiro概述

一、概述 Shiro是一款主流的Java安全框架&#xff0c;不依赖任何容器&#xff0c;可以运行在JavaSE 和 JavaEE项目中&#xff0c;它的主要作用是对访问系统的用户进行身份认证、授权、会话管理、加密等操作。 一句话&#xff1a;Shiro是一个用来解决安全管理的系统框架&#x…
阅读更多...
洛谷P4185 离线+并查集

洛谷P4185 离线+并查集

好题&#xff0c;发现没有强制在线&#xff0c;可以离线操作 排序之后带集合点数的并查集就好了 #include<bits/stdc.h> using namespace std; const int N 1e510; int n,m; int p[N],sz[N];int find(int x){if(x!p[x])p[x] find(p[x]);return p[x]; } struct Node{in…
阅读更多...
【自动控制原理】时域分析法：稳定性分析（稳）、误差分析和计算（准）

【自动控制原理】时域分析法：稳定性分析（稳）、误差分析和计算（准）

文章目录 第3章 时域分析法3.1 基本概念3.2~4 一阶、二阶、高阶系统的时间响应及动态性能3.6 稳定性分析——稳3.6.1. 稳定性的定义3.6.2 稳定性的条件3.6.3 劳斯稳定判据首列出现0&#xff0c;但该行不全为0首列出现0&#xff0c;且该行全为0 3.5 误差分析和计算——准3.5.1稳…
阅读更多...
矢量图形编辑软件Boxy SVG mac中文版软件特点

矢量图形编辑软件Boxy SVG mac中文版软件特点

Boxy SVG mac是一款基于Web的矢量图形编辑器&#xff0c;它提供了一系列强大的工具和功能&#xff0c;可帮助用户创建精美的矢量图形。Boxy SVG是一款好用的软件&#xff0c;并且可以在Windows、Mac和Linux系统上运行。 Boxy SVG mac软件特点 简单易用&#xff1a;Boxy SVG的用…
阅读更多...
使用sizeof()和strlen()去计算【数组】和【指针】的大小

使用sizeof()和strlen()去计算【数组】和【指针】的大小

文章目录 一、知识回顾1、回顾sizeof()、strlen的作用&#xff1a;2、数组和指针3、数组名 二、sizeof()、strlen()的使用区别1、注意区别&#xff1a;2、一维数组与一级指针3、二维数组与二级指针 三、总结回顾 一、知识回顾 1、回顾sizeof()、strlen的作用&#xff1a; siz…
阅读更多...
【18】c++11新特性 —＞线程同步

【18】c++11新特性 —＞线程同步

线程同步&#xff1a;线程同步就是让多个线程按顺序访问临界区域&#xff0c;只有在当前线程访问临时区结束后&#xff0c;下一个线程才能继续访问。&#xff08;临界区加锁即可&#xff09; #include <iostream> #include <chrono> #include <thread> #inc…
阅读更多...
【ZYNQ】裸机 PS + PL 双网口实现之 SDK 程序设计

【ZYNQ】裸机 PS + PL 双网口实现之 SDK 程序设计

涉及 lwip 库文件及 ZYNQ 配置相关可参考以下文章&#xff1a; 【ZYNQ】裸机 PS PL 双网口实现之 LWIP 库文件修改 【ZYNQ】裸机 PS PL 双网口实现之 ZYNQ 配置 工程配置 启动 SDK &#xff0c;创建模板工程&#xff0c;配置 BSP。 勾选 lwip141 库。 对 lwip 做如下配置…
阅读更多...
Flink—— Data Source 介绍

Flink—— Data Source 介绍

Data Source 简介 Flink 做为一款流式计算框架&#xff0c;它可用来做批处理&#xff0c;即处理静态的数据集、历史的数据集&#xff1b;也可以用来做流处理&#xff0c;即实时的处理些实时数据流&#xff0c;实时的产生数据流结果&#xff0c;只要数据源源不断的过来&#xff…
阅读更多...
在IDEA中配置Web开发环境

在IDEA中配置Web开发环境

一、idea配置Web开发环境 第一步&#xff1a;下载并安装Tomcat服务器&#xff08;建议放根目录&#xff0c;完整路径中不要出现中文&#xff09; 第二步&#xff1a;打开IDEA&#xff0c;新建java项目 第三步&#xff1a;为项目添加Web应用 在项目上右键➡️选择“Add Framew…
阅读更多...
算法通关村第七关-黄金挑战二叉树迭代遍历

算法通关村第七关-黄金挑战二叉树迭代遍历

大家好我是苏麟 , 今天带来二叉树的迭代遍历 . 二叉树的迭代遍历 前序编列 描述 : 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 题目 : LeetCode 二叉树的前序遍历 : 144. 二叉树的前序遍历 分析 : 前序遍历是中左右&#xff0c;如果还有左子树就一…
阅读更多...
交叉编译中常见错误解决方法

交叉编译中常见错误解决方法

目录 程序运行基础知识 编译程序时去哪找头文件&#xff1f; 链接时去哪找库文件&#xff1f; 运行时去哪找库文件&#xff1f; 运行时不需要头文件&#xff0c;所以头文件不用放到板子上 常见错误的解决方法 头文件问题 库文件问题 运行问题 交叉编译程序的万能命令 …
阅读更多...
YOLOv5-6.1源码详解之损失函数loss.py

YOLOv5-6.1源码详解之损失函数loss.py

目录 1 目标检测结果精确度的度量 2 YOLOv5-6.1损失函数 2.1 classification类别损失 2.2 confidence置信度损失 2.3 localization定位损失 3 YOLOv5-6.1损失函数loss.py代码解析 3.1 class ComputeLoss 3.1.1 __init__ 3.1.2 build_targets 3.1.3 _call__ 3.2 smo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023