js实现二级导航

最新推荐文章于 2022-12-25 19:26:32 发布

ElinorY

最新推荐文章于 2022-12-25 19:26:32 发布

阅读量2.6k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_38269675/article/details/88887574

版权

贴下效果图：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 导航栏 -->
	<style>
	.page{
		width: 960px;
		height: 460px;
		margin: 20px auto;
		position: relative;
	}
	.bg{
		width: 240px;
		height: 460px;
		background: rgba(7, 17, 27, 0.4);
		opacity: 0.5;
		position: absolute;
		top: 0;
		left: 0;
	}	
	
	.main{
		width: 240px;
		height: 460px;
		position:absolute;
		top: 0;
		left: 0;
	}
	a{
		text-decoration: none;
	}
	.nav{
		width: 240px;
		height: 80px;
		margin-top: 20px;
		line-height: 80px;
	}
	.nav span{
		margin-left: 32px;
		color: white;
		font-size: 19px;
	}
	.line{
		width:190px;
		border-bottom: 1px solid rgba(7,17,27,0.3);
		margin: 0 auto;
	}
	.sub{
		width: 720px;
		height: 460px;
		position: absolute;
		left: 240px;
		top: 0;
		display: none; 
	}
	.sub-menu{
		width: 720px;
		height: 460px;
		/* margin-top: -20px; */
		/* display: none; */
		background-color: red;
		overflow: hidden;
		
	}
	.inner-box{
		/* margin-top: -20px;*/
		overflow: hidden;
		width: 720px;
		height: 460px;
		background-color: black;
		background-image: url('img/bg.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-s

最低0.47元/天解锁文章

ElinorY

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实现二级导航

贴下效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>  <style> .page{ width: 960px; ...
复制链接

扫一扫