效果图
代码块
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入</title>
<link rel="icon" href="background/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<img class="background" src="background/blog.jpg">
<div class="overall" id="overall">
<div class="form">
<div class="log">
<p class="p1">登入</p>
</div>
<div class="logo">
<img src="background/1.png" width="20px" height="20px" alt=""/>
<input type="text" id="username" placeholder="输入用户名"/><br><br>
<input type="password" id="password" placeholder="输入用户密码"/>
</div>
<div class="image">
<img src="background/2.png" width="20px" height="20px" alt=""/>
</div>
<div class="login">
<input type="button" id="dengbutton" value="登入" onclick="login()">
<!--<input type="checkbox" id="rememberMe" checked="checked"/>记住密码-->
</div>
</div>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
/* 整体框架样式和位置布局*/
#overall{
width: 1200px;
background-repeat: no-repeat;
background-position: center center;
}
/* 表格表头布局 */
.form .log .p1{
display: inline-block;
font-size: 28px;
margin-top: 30px;
width: 86%;
}
#overall .form .log{
width: 86%;
border-bottom: 1px solid #ee7700;
margin-bottom: 60px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
/* 表格位置和样式 */
#overall .form{
height: 408px;
width: 368px;
position: absolute;
background-color: #FFFFFF;
top: 20%;
right: 15%;
}
/* 用户名文本框前面的图片布局 */
.form .logo img{
position: absolute;
top: 12px;
left: 8px;
}
/* 密码文本框前面的图片布局 */
.form .image img{
position: absolute;
top: 209px;
left: 35px;
}
/* 用户名和密码文本框布局 */
.form .logo input{
width: 95%;
height: 42px;
text-indent: 2.5rem;
}
#overall .form .logo{
width: 86%;
position: relative;
margin-bottom: 30px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
}
/* 登入按钮布局 */
.login input{
width: 100%;
height: 45px;
background-color: #ee7700;
border: none;
color: white;
font-size: 18px;
}
/* 登入文本框布局 */
#overall .form .login{
width: 86%;
margin-top: 15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#overall .form .login #rememberMe{
margin-top: 10px;
width: 10px;
height: 10px;
}
.background{
width: 100%;
height: 932px;
}