总结
实操会更好，加油！
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #eeeeee;
}
.bj{
width: 400px;
height: 350px;
background: rgb(34, 124, 255,0.4);
margin: 100px auto;
border-radius: 15px;
text-align: center;
}
img{
border-radius: 50%;
margin-top: 10px;
}
input{
border: none;
width: 250px;
height: 40px;
margin-top: 10px;
border-radius: 8px;
padding-left: 10px;
font-size: 16px;
}
button{
width: 150px;
height: 40px;
background:#eeeeee ;
border-radius: 8px;
border: none;
margin-top: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="bj">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552544584619&di=8d42f935bd5d4ce82c1f8a8863843ab5&imgtype=0&src=http%3A%2F%2Fimg.photo.163.com%2F6-woxecPz1aBq_csvd10Rw%3D%3D%2F2834453015476316347.jpg" width="150px" height="150px">
<form action="" method="">
<input type="text" placeholder="请输入账号"><br>
<input type="password" placeholder="请输入密码"><br>
<button>登录</button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例