先在body中把最基础的标签写出来
现在页面运行出来是这样的
就是一个没有任何样式的基础界面：
接下来我们为这些标签加上样式
首先还是让页面所有元素的padding和margin都设置为0，
清除浏览器本身对界面的影响：
然后加上背景图，并且将字体设置为微软雅黑
接下来给整个登陆框设置样式
并且让登陆框绝对居中，会使用到绝对位置属性
给h1标签加上样式
给两个输入框设置样式，border给输入框设置边框线样式、粗细和颜色；
border-radius属性给边框设置圆角角度，像素越接近10，弧度越大
给登陆和注册按钮设置样式，
样式设置完，界面就是这样的
代码实现如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style>
*{margin:0;
padding:0;
box-sizing:border-box;
}
body {
background: url(./img/timg.jpg) no-repeat center 0px fixed;
background-size: cover;
font-family: "微软雅黑", sans-serif;
}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
.login h1 {
color:#555555;
text-shadow: 0px 10px 10px #CDC673;
letter-spacing:2px;text-align:center;
margin-bottom:20px;
}
input{
padding:10px;
width:100%;
color:white;
margin-bottom:10px;
background-color:#555555;
border: 1px solid black;
border-radius:5px;
letter-spacing:2px;
}
form button{
width:100%;
padding:10px;
margin-bottom:10px;
background-color:#CDC673;
border:1px solid black;
border-radius:5px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="headtop"></div>
<div class="login">
<h1>Login</h1>
<form action="" method="post">
<input type="text" name="user" placeholder="用户名" required="required">
<input type="password" name="password" placeholder="密 码" required="required">
<button type="submit">登录</button>
<button type="submit" onclick="location='zhuce.html'">注册</button>
</form>
</div>
</body>
</html>
若要实现页面跳转可以加入a标签，使跳转到注册界面。