最近想要學(xué)習(xí)如何制作登陸界面，便來搜索了一下相關(guān)的代碼和資料。最終我找到了一些非常實(shí)用的 HTML 和 CSS 代碼，供大家學(xué)習(xí)和使用。
下面是我所找到的一些 HTML 和 CSS 代碼，可以幫助你制作一個(gè)漂亮的登陸界面。
HTML 代碼：
Login Here
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.login-box {
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.login-box h1 {
float: left;
font-size: 40px;
border-bottom: 6px solid #4caf50;
margin-bottom: 50px;
padding: 13px 0;
}
.textbox {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #4caf50;
}
.textbox i {
width: 26px;
float: left;
text-align: center;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 80%;
float: left;
margin: 0 10px;
}
.btn {
width: 100%;
background: none;
border: 2px solid #4caf50;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 12px 0;
}
.btn:hover {
background: #4caf50;
transition: .5s;
}
.fas {
color: #4caf50;
}