HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form action="">
<input class="text" type="text" name="" value="" placeholder="账号">
<br />
<input class="pwd" type="password" name="" value="" placeholder="密码">
<br />
<input class="sub" type="submit" name="" value="登录">
<p>版权所有©hqyj.com</p>
</form>
</body>
</html>
CSS代码
body{background-image: url(images/bgt.jpeg);}
form{
position: absolute;
left: 50%;
top: 50%;
}
.text{
width: 200px;
height: 30px;
border-radius:15px ;
border: none;
padding-left: 10px;
margin-bottom: 10px;
}
.pwd{
width: 200px;
height: 30px;
border-radius:15px ;
border: none;
padding-left: 10px;
margin-bottom: 10px;
}
.sub{
width: 150px;
height: 30px;
border: none;
background-color: skyblue;
font-size: 15px;
color: white;
margin-left: 28px;
padding-bottom: 3px;
padding-left: 12px;
}
p{
margin-top: 3px;
text-align: center;
}
.sub:hover{
background-color: #f0f;
}
效果图