前端登陆界面

最新推荐文章于 2024-05-17 04:26:22 发布

白仑色

最新推荐文章于 2024-05-17 04:26:22 发布

阅读量2k

点赞数 4

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

本文链接：https://blog.csdn.net/qq_45572615/article/details/109013210

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS+HTML来编写的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息登陆系统</title>
		<style type="text/css">
			.thead-div{
				height: 60px;
				background-color: #9ed2ff;
				padding: 50px;
			}
			#div1{
				height: 50px;
				width: 600px;
				margin: 0 auto;
			}
			#div1>h1{
				margin:auto;
				font-size: 60px;
			}
			.tbody_div{
				height: 700px;
				background-image: url("http://attach.bbs.miui.com/forum/201408/17/225855hd0lngdfcm0crtyy.jpg");
				background-size: cover;
				
			}
			.tbody_div>div{
				height: 500px;
				width: 500px;
				float: right;
				margin-top: 100px;
				margin-right: 100px;
				background-color:rgba(226, 244, 255,0.4);
			}
			#div2 div{
				height: 70px;
				width: 300px;
				margin-left: 100px;
			}
			#d1{
				margin-top: 150px;
				font-size: 25px;
			}
			#d2{
				margin-top: 20px;
				font-size: 25px;
			}
			#d3{
				margin-top: 30px;
				font-size: 20px;
			}
			#d1 #inp1{
				height: 30px;
				width: 220px;
				float: right;
				background-color:rgba(255, 255, 255, 0.8);
			}
			#d2 #inp2{
				height: 30px;
				width: 220px;
				float: right;
				background-color:rgba(255, 255, 255, 0.8);
			}
			#d3 #inp3{
				height: 40px;
				width: 220px;
				margin-left: 78px;
			}
			.tfoot_div{
				height: 50px;
				background-color: #9ed2ff;
			}
			#d4{
				height: 20px;
				width: 300px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<thead>
			<div class="thead-div">
				<div id="div1">
					<h1>学生信息登陆系统</h1>
				</div>
			</div>
		</thead>
		<tbody>
			<div class="tbody_div">
				<div id="div2">
					<div id="d1">
						<span>姓名：<input type="text" placeholder="请输入用户名" id="inp1"/></span>
					</div>
					<div id="d2">
						密码：<input type="password" id="inp2" placeholder="请输入密码"/>
					</div>
					<div id="d3">
						<input type="submit" id="inp3" value="登录" />
					</div>
				</div>
			</div>
		</tbody>
		<tfoot>
			<div class="tfoot_div">
				<div id="d4">
					&copy;2020-10-11/xxxxxxxxxxxxxxx
				</div>
			</div>
		</tfoot>
	</body>
</html>

下面是运行结果

白仑色

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
7
评论
前端登陆界面

CSS+HTML来编写的代码 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学生信息登陆系统</title> <style type="text/css"> .thead-div{ height: 60px; background-color: #9ed2ff; padding: 50px; ..
复制链接

扫一扫