HTML—项目实战（注册界面的设计以及实现）

最新推荐文章于 2024-01-04 10:44:40 发布

QNAN-

最新推荐文章于 2024-01-04 10:44:40 发布

阅读量722

点赞数

分类专栏： HTML javascript

本文链接：https://blog.csdn.net/QNANWang/article/details/102469857

版权

javascript 同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

HTML

19 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>启迪数字学院</title>
		<link rel="stylesheet" type="text/css" href="css/reset1.css" />
		<link rel="stylesheet" type="text/css" href="css/page.css" />
	</head>
	<body>	
			<div class="box1">
				<div class="box3">
					<h1>欢迎回来</h1>
					<div class="border">
						<img class="user"src="img/user.png">
						<img class="lock"src="img/lock.png">
						<form action="#" >
  						 <input type="text"   name="number"  placeholder="学号"  id="number"/><br>
						 <input type="password" name="password" placeholder="密码"  id="number"/><br>
						 <a href="#" class="se">忘记密码？</a>
						</form>
						<form action="#" >
							<input type="button" name="tijiao" value="登    录"  id="number1"/><br>
						</form>		
						<a href="#" class="se2">没有账号？立即注册</a>
							<a class="p1" href="#"><img src="img/QQ.png"></a>
							<a class="p2" href="#"><img src="img/wechat.png"></a>
							<a class="p3" href="#"><img src="img/weibo.png"></a>	
					</div>
				</div>
				<div class="box2"></div>			
			</div>
	</body>
</html>

CSS：

body{
 	background:url(../img/back.png) no-repeat center center;
 	background-size: 100% 100%;
    background-attachment: fixed; 
 }
 .box1{
 	background: white;
 	width:1100px;
 	height:550px ;
 	margin:70px auto;
 }
 .box3{
 	width: 550px;
 	height:550px;
 	background-color: white;
 	float:right;
 	border-left:1px #d6d6d6 dotted;
 }
 .box2{
 	background:url(../img/启迪LOGO.png) no-repeat center center;
 	width:550px;
 	height:550px ;
 }
.box3 h1{
	font:36px 方正粗黑宋简体;
	color:#82007b;
	padding-top: 50px;
	padding-left: 200px;
}
.border{
	border:black solid 0.5px ;
	width:400px;
	height:350px ;
	margin-left:70px;
}
.se{
	margin-left:300px ;
	text-decoration: none;
	font-size:11px ;
	color:dodgerblue;
}
.border .b img{
	width:500px;
	height: 400px;
	position:relative;
	bottom:196px;
	right:50px;
}
.box3 .se2{
	font-size:11px ;
	text-decoration: none;
	position: relative;
	bottom:60px;
	left:150px;
}
.border .p1 img{
	width:40px;
	height:40px;
	position: relative;
}
.border .p2 img{
	width:79px;
	height:73px;
	position: relative;
	bottom:-18px;
	left:15px;	
}
.border .p3 img{
	width:61px;
	height:62px;
	position: relative;
	bottom:-15px;
	left:10px;	
}
.lock{
	width:22px;
	height:20px;
	position: relative;
	right:20px;
	top:85px;
}
.user{
	height:70px;
	position: relative;
	left:30px;
	top:55px;
}
#number{
	width:250px;
	height:31px;
	border-radius:10px;
	margin-bottom: 15px;
	border:1px solid #ccc;
	background-color: transparent;
	position: relative;
	left:85px;
}
#number1{
	width:200px;
	height:31px;
	border-radius:10px;
	margin-bottom: 15px;
	border:1px solid #ccc;
	background-color: transparent;
	position: relative;
	left:100px;
	background: #82007b;
	font: 22px;
	color:white;
}

界面如图：
在这里插入图片描述
网址链接：http://127.0.0.1:8020/QIDI/index.html

QNAN-

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML—项目实战（注册界面的设计以及实现）

代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>启迪数字学院</title> <link rel="stylesheet" type="text/css" href="css/reset1.css" /> <...
复制链接

扫一扫