html制作的登陆界面
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color:black; #后面的整体背景颜色
}
.hei h1{ #h1登陆 的属性
color:white;
width:200px;
height:50px;
}
.hei{ #类的属性
width:200px;
padding:50px;
position:absolute;
left:40%;
top:25%;
text-align:center; #文字对齐：居中center
background-color:red;
}
.hei input[type="text"],input[type="password"]{
color:blue; #更改的input框内的颜色，包括了占位符的颜色
padding:5px;
border:2px solid black;
margin:40px,auto;
transition:0.25s; #过渡的时间
width:150px;
}
.hei input[type="text"]:focus,input[type="password"]:focus{ #这个:focus是焦点选择的，焦点放到输入框上就会实现过渡
width:188px;
}
</style>
</head>
<body>
<form class="hei" action="" method="post">
<h1>登陆</h1>
<input type="text" name="" placeholder= "username" > #后面的placeholder(占位符)
<input type="password" name="" placeholder= "password" >
</body>
</html>
为了方便我直接把css写到html里了，没有引用，还可以在制作一些细节，这个只是一个大概，鼠标放到 input 输入框里会有个过度动画（手动滑稽-。-）效果如下：
运行时显示这样，鼠标移动到输入框里：
有一个小小的过渡动画。
代码后面我标了有注释。
emmmmmmmmmmmmmmmmmm