web登录demo
本人小白一枚，自学web前端，之前学习前端，学着写了一个web登录界面，发布在了简书，现在自己利用优秀的开源博客halo搭建了属于自己的个人网站，将文章迁移过来，大佬勿喷;跪求指点。
1.HTML页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>登录</title>
<link rel="stylesheet" href="login.css" />
</head>
<body>
<div class="wrap">
<form action="#" method="post">
<h2 class="title">登录</h2>
<div class="box">
<input type="text" placeholder="用户名" class="in01" />
</div>
<div class="box">
<input type="password" placeholder="密码" class="in01" />
</div>
<div class="box01">
<input type="submit" value="登录" class="btn" />
<input type="reset" value="重填" class="btn" />
</div>
</form>
</div>
</body>
</html>
2.CSS代码
*{
margin: 0;
padding: 0;
}
body{
background: url("01.jpg");
}
h2{
color: #429bab;
size: 25px;
}
.wrap{
position: absolute;
border: 1px solid #ffec8b3b;
background-color: #8bd6ff17;
width: 200px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -125px;
border-radius: 5%;
}
.box{
margin-top: 25px;
margin-bottom: 25px;
}
/*.box01{
margin-left: 65px;
width: 40px;
height: 35px;
}*/
.in01{
height: 35px;
width: 175px;
border: 0px;
border-radius: 10%;
margin-left: 10px;
background-color: #c5c5c3b0;
}
.btn{
width: 55px;
height: 29px;
margin-left: 30px;
border: 0px;
border-radius: 10%;
background-color: #94b6de4d;
}
.btn:hover{
background-color: #36648B;
color: white;
}
3.效果图
web登录demo
https://www.diaoyc.cn//archives/web%E7%99%BB%E5%BD%95demo