前端-二级菜单+简易登录界面

最新推荐文章于 2022-12-16 14:01:31 发布

BAE_Ai_

最新推荐文章于 2022-12-16 14:01:31 发布

阅读量1.1k

点赞数 2

分类专栏： VUE/WEB 文章标签：二级菜单+简易登录界面

本文链接：https://blog.csdn.net/Little_Ai_/article/details/89111903

版权

VUE/WEB 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端-二级菜单+简易登录界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	<link rel="stylesheet" href="css/new_file.css" />
	</head>
	<body>
		<div class="list">
		<ul class="ul-list">
			<img src="img/logo .jpg" height="100px" width="100px" id="pc-1">
			<li class="list1"><a href=""id="sy"><h3>首页</h3></a></li>
			<li class="list1"><a href="" id="mgz"><h3>美工组</h3>
					<ul class="menu" id="m-1">
						<li>
							<b class="mg" href="" id="mg-1">前端组</b>
						</li>
						<li>
							<b class="mg" href=""id="mg-2">视频组</b>
						</li>
						<li>
							<b class="mg" href=""id="mg-3">P  S  组</b>
						</li>
						</ul>
				</a></li>
				<li class="list1"><a href="" id="bcz"><h3>编程组</h3>
					<ul class="menu" id="b-1">
						<li>
							<b class="bc" href="" id="bc-1">ACM组</b>
						</li>
						<li>
							<b class="bc" href=""id="bc-2">BCS后端组</b>
						</li>
						<li>
							<b class="bc" href=""id="bc-3">IOS组</b>
						</li>
						<li>
							<b class="bc" href=""id="bc-4">Android组</b>
						</li>
						<li>
							<b class="bc" href=""id="bc-5">信息安全组</b>
						</li>
						<li>
							<b class="bc" href=""id="bc-6">嵌入式组</b>
						</li>
						</ul>
				</a></li>
				<li class="list1"><a href=""id="swz"><h3>商务组</h3></a></li>
				<li class="list1"><a href=""id="jjz"><h3>教技组</h3></a></li>
				</ul>
				</div>
		<div class="entry">
			<p id="yhdl"><h1>用户登录</h1></p>
			<p id="zh">账号:<input id="name"  placeholder="请输入账号"></p>
			<b></b>
			<p id="mm">密码:<input id="password"  placeholder="请输入密码"></p>
			<b></b>
			<button "one()">登录</button>
		</div>
	</body>
	<script>
		function one(){
			var oUpass = document.getElementById("password").value;
			var oUname = document.getElementById("name").value;

			if(oUname.length < 1){
				alert("请输入用户名")
				console.log(oUname.length)
				return false;	 
            }
			if (oUpass.length < 6){
                alert("请输入大于6位字符")
              	return false;
           }
            else{
                alert("登录成功");
            }
          }
	</script>
</html>

css界面

.ul-list{
	z-index: 999;
}
.list2{
	z-index: 999;
}
li{
	list-style: none;
}
a{
	text-decoration:none;
	color: black;
	float:left;
	line-height: 50px;
	display:block;
	/*法二：block是把行内元素以块级元素的形式展示出来*/
}
a:hover{
	color: red;
}
.menu{
	display: none;
	/*二级菜单隐藏*/
}
ul>li>ul>li{
	float:left;
}
ul>li:hover ul{
	display:block;
	/*当鼠标悬在一级菜单上时，二级菜单显示*/
}
b{
	background-color: yellow;
	text-align: center;
	display:block;
}
b:hover{
	color: black;
    background-color: red;
}/*停留*/
#pc-1{
	float: left;
	margin-left: 100px;
}
#sy{
	margin-left: 100px;
}
#mgz{
	margin-left: 100px;
}
#m-1{
	margin-left: -50px;
}
#bcz{
	margin-left: 100px;
}
#b-1{
	margin-left: -70px;
}
#swz{
	margin-left: 100px;
}
#jjz{
	margin-left: 100px;
}
.entry{
	z-index: -999;
    position: absolute;
	margin-top:100px;
	margin-left:500px;
    text-align: center;
}

BAE_Ai_

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-二级菜单+简易登录界面

前端-二级菜单+简易登录界面<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/new_file.css" /> </head> <body> <div class="...
复制链接

扫一扫