1.HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<form>
<input class="tt" type="text" name="" value="" placeholder="账号">
<br />
<input class="pwd" type="password" name="" value="" placeholder="密码">
<br />
<input class="bun" type="button" name="" value="登陆">
<br />
<p>
版权所有&cpy;zz.com
</p>
</form>
<body>
</body>
</html>
2.CSS部分
body{
background-image: url(images/bgt.jpeg);
}
form{
position: absolute;
left: 50%;
top: 50%;
}
.tt{
width: 200px;
height: 24px;
border: none;
margin-bottom: 10px;
border-radius: 50px;
padding-left: 10px;
}
.pwd{
width: 200px;
height: 24px;
border: none;
margin-bottom: 10px;
border-radius: 50px;
padding-left: 10px;
}
.bun{
width: 200px;
height: 24px;
border: none;
background-image: url(images/bgt.jpeg);
font-size: 18px;
color: white ;
}
p{
text-align: center;
margin-top: -2px;
}
3.运行结果
![](https://i-blog.csdnimg.cn/direct/88681fc6f86b4063ba8eff47c58a4e73.png)