Themselves in the learning process of learning to follow simple html page, page showing the effect of:
>>> source code as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<Title> Log </ title>
<style>
* {margin: 0px;
padding: 0px;
}
#bj {
background-image: url(
./ms01.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
#login_box {
width: 400px;
height: auto;
background: #00000060;
margin: auto;
margin-top: 13%;
text-align: center;
padding: 20px 50px;
color: #fff;
}
#login_box .form .name {
padding: 10px;
}
#login_box .form .name input {
width: 180px;
font-size: 18px;
border: 0;
border-bottom: 3px #fff solid;
background: #ffffff00;
padding: 5px 10px;
color: #fff;
}
#login_box #tj {
margin-top: 20px;
width: 160px;
height: 20px;
}
{#tj
border: 0px;
border-radius: 15px;
background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
}
</style>
</head>
<body id="bj">
<div id="login_box">
<h1>Login</h1>
<div class="form">
<div class="name">
<i></i>
<input type="text" placeholder="username">
</div>
<div class="name">
<i></i>
<input type="text" placeholder="password">
</div>
</div>
<button id="tj">login</button>
</div>
</body>
</html>
Note: Elements red background is a picture in the same folder, because you can not upload folders, so only upload the source code, placed below the picture.
