青少年编程教育平台后台—登录注册（界面设计）

最新推荐文章于 2024-01-08 17:55:52 发布

敷衍zgf

最新推荐文章于 2024-01-08 17:55:52 发布

阅读量713

点赞数

分类专栏：源程序文章标签： css 前端 html5

本文链接：https://blog.csdn.net/qq_45556665/article/details/122628350

版权

源程序专栏收录该内容

48 篇文章 10 订阅

订阅专栏

青少年编程教育平台后台—登录注册（界面设计）

本界面使用HTML和CSS，未使用任何框架！
一、效果截图
在这里插入图片描述 二、HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>青少年编程教育平台后台登录</title>
		<link rel="stylesheet" href="./font/css/font-awesome.css">
		<link rel="stylesheet" href="css/login.css" />
		<script ></script>
	</head>
	<body>
		<div class="title">
			<h1>青少年编程教育平台后端</h1>
		</div>
		<div class="user">
			<i class="fa fa-user"></i>
			<div class="head">管理员 登录</div>
		</div>
		
		<!-- 登录主体框 -->
		<div class="container">
			<div class="box login">
				<div class="form-content">
					<div class="avtar">
						<div class="pic"><img src="./img/login_img.png" alt=""></div>
					</div>
					<h1>欢 迎 登 录</h1>
					<form action="#" class="form">
						<!-- 用户名文本框 -->
						<div>
							<i class="fa fa-user-o"></i>
							<input type="text" placeholder="用户名">
						</div>
						<!-- 密码框 -->
						<div>
							<i class="fa fa-key"></i>
							<input type="password" placeholder="密码">
						</div>
						<div class="btn">
							<button>登 录</button>
						</div>
					</form>
					<p class="btn-something">
						还 没 有 账 户 ？<span class="signupbtn">注 册</span>
					</p>
				</div>
			</div>
			<div class="box signup">
				<div class="form-content">
					<div class="avtar">
						<div class="pic"><img src="./img/login_img.png" alt=""></div>
					</div>
					<h1>欢 迎 注 册</h1>
					<form action="#" class="form">
						<div>
							<i class="fa fa-user-o"></i>
							<input type="text" placeholder="用户名">
						</div>
						<div>
							<i class="fa fa-envelope-o"></i>
							<input type="email" placeholder="手机号">
						</div>
						<div>
							<i class="fa fa-key"></i>
							<input type="password" placeholder="密码">
						</div>
						<div class="btn">
							<button>注 册</button>
						</div>
					</form>
					<p class="btn-something">
						已 经 有 账 户 ？<span class="loginbtn">登录</span>
					</p>
				</div>
			</div>
		</div>
	</body>
	<script>
	</script>
</html>