代码:
<!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