简单登录界面（订餐系统）

最新推荐文章于 2024-08-22 18:02:12 发布

开始即是结束

最新推荐文章于 2024-08-22 18:02:12 发布

阅读量2.1k

点赞数 3

分类专栏： html 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_54780911/article/details/121723607

版权

html 专栏收录该内容

2 篇文章

订阅专栏

做期末项目的前端页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<style>
		body{
			background: url(./1.jpg);			//背景图片
			background-repeat: no-repeat;
			background-position: center;
			background-attachment: fixed;
			-webkit-background-size: 100% 100%;
		}
		#formbox{
			background: #8b785645;				
			width: 45%;
			margin: 0 auto;
			padding: 40px 50px;
			box-sizing: border-box;
		}
		#box{
			margin:0;
		}
		h1{
			font-size: 40px;
			font-weight: normal;
			text-align: center;
			padding-bottom: 60px;
			color: white;
		}
		div#box input[type="text"],div#box input[type="password"] {
			padding: 10px;
			width: 100%;
			border: 1px solid #8f5f3ab3; 
			color: white;
			background-color: #c7793d80;
			box-sizing: border-box;
			font-size: 20px;
		}
		
		div#box input[type="submit"]{
			width: 100%;
			padding: 10px;
			margin-top: 70px;
			background-color: #c7793dd6;
			border: none;
			color: white;
			font-size: 20px;
		
		}
		div#box input[type="submit"]:hover{
			background-color: #d1ae17bf;
		
		}
		a{
			text-decoration: none;
			color:white;
		}
		</style>
	</head>
	<body>
	
		<h1><a href="1.html">订餐系统</a></h1>
		<div id="formbox">
			<form name="form" action="1.html" onsubmit="return check()">
			<div name="box" id="box">
					<p style="color: white;">用户名：</p>
					<input  type="text" name="username"/>	
	
					<p style="color: white;">密码：</p>
					<input type="password" name="password" />											
				<div>
				<input type="submit" value="登录"/>						
				</div>
			</div>
			</form>

		</div>
		

	</body>
</html>

效果图，（艺术细胞不行）：