<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0; /*重置*/
padding: 0;
}
body{
background-color: whitesmoke; /*页面背景色*/
}
.top{
width: 100%;
height: 60px;
background-color: black;
padding-left: 100px;
}
.box{
width: 500px;
height: 600px;
background-color: white; /*背景色*/
border-radius: 5px; /*圆弧*/
margin: 20px auto; /*距离上部20px，自动居中*/
}
.box-top{
width: 500px;
height: 60px;
border-bottom: 1px solid black;
line-height: 60px;
}
.box-top h3{
float: left;
border-bottom: 3px solid #c18ef0;
font-size: 30px;
}
.box-top a{
float: right;
font-size: 20px;
color: skyblue;
}
.box-regist input{
width: 480px;
height: 40px;
border-radius: 5px;
margin:10px;
}
.box-regist .inpbox{
width: 300px;
}
.box-regist a{
display: inline-block;
border: 1px solid rebeccapurple;
width: 100px;
height: 40px;
border-radius: 5px;
margin: 10px;
line-height: 40px;
text-align: center;
color: rebeccapurple;
}
.btn{
background-color: aqua;
}
.tail{
width: 100%;
height: 120px;
background-color: grey;
} </style>
</head>
<body>
<div class="top"></div>
<div class="box">
<div class="box-top">
<h3>请注册</h3>
<a href="F:\项目\HTML\标签.html">立即登陆></a>
</div><br>
<div class="box-regist">
<form method="post" action="">
<input type="text" placeholder="请输入手机号" name="phone"><br>
<input class="inpbox" type="text" placeholder="请输入短信验证码" name="cookie"><a>发送验证码</a><br>
<input type="text" placeholder="请输入用户名" name="user"><br>
<input type="password" placeholder="请输入密码" name="psw"><br>
<input type="password" placeholder="请再次输入密码" name="pswt"><br>
<input class="inpbox" type="text" placeholder="请输入图形验证码" name="img-cookie"><a>此处为图形</a><br>
<input class="btn" type="submit" value="立即注册">
</form>
</div>
</div>
<div class="bot1"></div>
<div class="bot2"></div>
<div class="tail"></div>
</body>
</html>