web---html+css+js登录界面

Quite_a_lot_hair

已于 2022-04-05 22:58:17 修改

阅读量621

点赞数 1

分类专栏： Web 文章标签： html css javascript 前端

于 2021-12-01 23:04:24 首次发布

本文链接：https://blog.csdn.net/Quite_a_lot_hair/article/details/121667147

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用HTML、CSS、JavaScript实现登录的简单静态界面，登录注册等功能还未实现。

源代码如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>LYW</title>
		
		<!--CSS代码块-->
		<style type="text/css">
			/*dl_main块总体布局*/
			#dl_main{
				position: absolute;
				left:30%;
				top: 40%;
				width: 40%;
				height:450px;
				margin-top:-200;/*底部空白*/		
				text-align-last: center;/*所有内容居中*/
				background-color: #9A9A9A;/*背景颜色*/
				/*背景颜色设置透明效果，两种方式支持的浏览器不同*/
				filter: opacity(70);
				opacity: 0.7;
			}
			/*dl_main中账号*/
			#account{
				color: #000000;
				text-align: center;
				font-size: 30px;
				border-radius: 25px;/*边框弧度*/
			}
			/*dl_main中密码*/
			#password{
				color: #000000;
				text-align: center;
				font-size: 30px;
				border-radius: 25px;/*边框弧度*/
			}
			/*dl_main中注册*/
			#zhuce{
            	font-size: 17px;
			}
			/*dl_main中记住密码*/
			#remPassword{
				font-size: 17px;
			}
			/*dl_main中忘记密码*/
			#forget{
				font-size: 17px;
			}
			/*dl_main中登录*/
			#denglu{
				background-color: #605993;
				color: #FFFFFF;
            	height:50px;
             	width:300px;
				padding:5px 10px;/*上下填充10 左右5*/
				font-size: 20px;
				border:0;/*边框宽度*/
				border-radius:10px;/*边框弧度*/
			}
			/*改变超链接的颜色*/
			a{
				color: #000000;
			}
		</style>
		
		<!--JavaScript代码块-->
		<script type="text/javascript">
			function f_login(){
				account = window.document.loginForm.account.value;
				password = window.document.loginForm.password.value;
				if(account==""){
					alert("账号不能为空");
					document.loginForm.account.focus();//聚焦
					return;
				}
				else if(password==""){
					alert("密码不能为空");		
					document.loginForm.password.focus();//聚焦
					return;	
				}	
				document.loginForm.submit();	
			}
		</script>
		
	</head>

	<body background="星.jpg" style="background-repeat: no-repeat;background-size: cover;background-attachment: fixed">
		<div id="dl_main">
			<h1 style="color:#000000;font-size: 60px;font-family: '华文楷体'">Login</h1><br>
			<!--表单（包括账号、密码、注册、记住密码、忘记密码、登录）-->
			<form name="loginForm">
				<input type="text" name="account" id="account" placeholder="请输入账号"><br><br>
				<input type="password" name="password" id="password" placeholder="请输入密码"><br>
				<a href="register.html" style="text-decoration:none" name="zhuce" id="zhuce">注册账号</a>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="checkbox" name="remPassword" id="remPassword"><label for="remPassword">记住密码</label>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="forget.html" style="text-decoration:none" name="forget" id="forget">忘记密码</a>
				<br><br>
				<input type="button" name="denglu" id="denglu" value="登 录" onClick="f_login()">
			</form>
		</div>
	</body>
</html>

用到图片星.jpg 请添加图片描述
界面如下：
在这里插入图片描述

Quite_a_lot_hair

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
web---html+css+js登录界面

使用HTML、CSS、JavaScript实现登录的简单静态界面，登录注册等功能还未实现。源代码如下：<!doctype html><html> <head> <meta charset="utf-8"> <title>LYW</title>  <style type="text/css"> /*dl_main块总体布局*/ #dl_main
复制链接

扫一扫

专栏目录