登陆界面.html

最新推荐文章于 2024-04-08 08:08:19 发布

别挡

最新推荐文章于 2024-04-08 08:08:19 发布

阅读量107

点赞数

分类专栏： html基础知识文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_45939821/article/details/131829316

版权

html基础知识专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阿甲科技</title>
		<style>
			#d8 {
				margin:0;
				background-color: rgba(245, 245, 245,0);
				width: 100%;
				height: 100px;
				margin-top: -20px;
				margin-left: -22px;
				
			}

			#d2 {
		        margin:0;
				background: url(imgs/bg.png) no-repeat 0px 0px;
				width: 100%;
				height: 506px;
				margin-top: -20px;
				margin-left: -8px;
				position: absolute;
			     
			}

			#d42 {
				width: 281px;
				height:347px;
				background-color: rgba(64, 65, 67,0.5);
				margin-top: 110px;
			}

			#d48 {
				background-image:url(imgs/logo.png);
				width: 200px;
				height:50px;
				background-repeat: no-repeat;
				margin-left: 50px;
				margin-top: 35px;
				
			}
			#p48{
				margin-left: 230px;
				margin-top: -40px;
				font-size: 20px;
				color: rgba(80, 78, 92,0.9);
			}
			hr{
				width:270px;
				margin-left:-5px;
				margin-top: -300px;
				
			}
			#username{
				margin-left: 0px;
				margin-top:10px;
				width:263px;
				height:30px;
				border-radius: 0px;
				outline: none;
				border: none;
				background-image: url(imgs/yhm.png);
				background-repeat: no-repeat;
				background-size:30px 32px ;
				background-position: right;
				
			}
			#password{
				width:263px;
				height:30px;
				border-radius: 0px;
				outline: none;
				border: none;
				background-image: url(imgs/mm.png);
				background-repeat: no-repeat;
				background-size:30px 32px ;
				background-position: right;
				
			}
			#p1{
				font-size: 20px;
				color: white;
				
			}
			#s1{
				font-size: 10px;
			}
			#dd1{
				margin-top: 15px;
				margin-left: 5px;
				
			}
			#dd2{
				margin-top: 40px;
				margin-left: 5px;
			}
			#dd3{
				margin-top: 70px;
				font-size: 13px;
				color: white;
			}
		    #button2{
				color: white;
				font-size: 20px;
				background-color: rgb(20, 166, 239);
				width:260px;
				height:40px;
				outline: none;
				border: none;
			}
			#dd4{
				margin-top:10px;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div id="d8">
			<div id="d48">
                 
			</div>
			<p id="p48">欢迎登录</p>
		</div>
<form action="" method="">
		<div id="d2">   
			
	
			<div id="d42">
                 <p id="p1">登录学子商城
				     &nbsp;&nbsp;&nbsp;&nbsp;
				     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span id="s1">新用户注册</span>
				</p>
			</div>
			<hr>
			<div id="dd1">
				<input type="text" name="text" id="username">
			</div>
			<div id="dd2">
				<input type="password" name="password" id="password">
			</div>
			<div id="dd3">
				&nbsp;&nbsp;
				<input type="checkbox" id="button1">
				     <label for="button1">
				     自动登录
				     </label>
			     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
			    <span>忘记密码?</span>
			</div>
			<div id="dd4">
				<button id="button2">
					登录
				</button>
			</div>
			
			
			
		</div>
</form>
	</body>
</html>