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>Documenttitle>
    <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="#"> HOMEa>li>
          <li class="special"><a href="#"> PRODUCT a>li>
          <li class="special"><a href="#"> LOGINa>li>
          <li class="special"><a href="#"> ABOUT a>li>

          
          <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">
          
          <label class="switch">
            <input type="checkbox" onclick="changeMode()" />
            <span class="slider">span>
          label>
          
        div>

        <div id="bottom">Back to topdiv>
      div>
    div>
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

.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;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

二、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>Documenttitle>
	<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.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;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

三、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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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

3.点击配置

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

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

相关阅读:
一桩字符串长度引发的惨案
 【算法】树形DP③ 监控二叉树 ⭐（二叉树染色&二叉树灯饰）！
SpringBoot源码 | printBanner方法解析
 用共享文档为例理解mysql事务隔离级别，和“脏读”“不可重复读”“幻读”
Python二分查找
 flink接入mqtt数据源
 Spring Could 核心组件知识点, 看这篇就够了!
Demo26字母异位词
 GIS小技术分享（一）：python中json数据转geojson或者shp
Vue2：组件及组件通信
原文地址：https://blog.csdn.net/qq_43547255/article/details/134307567