背景图来自网络,下载背景图
先新建一个login.html文件,搭好骨架。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
</head>
<body>
<div class="page">
<div class="login-panel">
<form>
<fieldset>
<legend>欢迎登录</legend>
<div>
<input type="text" placeholder="请输入账号">
</div>
<div>
<input type="password" placeholder="请输入密码">
</div>
<div>
<button>登录</button>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
添加背景图,在header标签中添加style
<style>
html,body {
padding: 0;
margin: 0 auto;
height: 100%;
}
.page {
height: 100%;
background: url('./imgs/login-bg.jpg') no-repeat;
background-size: cover;
}
</style>
需要注意的是,html和body的高度要先设置为100%,这样page的背景图片的100%高度才会生效。
为表单设置宽度和背景,并垂直居中、水平居中。居中就要用到flex了,这是一个很好用的布局方式。三行css就可以搞定垂直与水平居中。
请看下面style代码,对.page添加了display代码,并新增了一个.login-page clss
.page {
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
height: 100%;
background: url('./imgs/login-bg.jpg') no-repeat;
background-size: cover;
}
.login-panel {
padding: 20px;
width: 400px;
background-color: #fff;
}
justify-content: center; 表示flex中的元素水平居中
align-items: center; 表示flex中的元素垂直居中
最后美化表单元素,全部代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style>
html,body {
padding: 0;
margin: 0 auto;
height: 100%;
}
.page {
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
height: 100%;
background: url('./imgs/login-bg.jpg') no-repeat;
background-size: cover;
}
.login-panel {
padding: 20px;
width: 400px;
background-color: #fff;
}
/* 下面开始是表单美化,根据自己的喜好来 */
.form fieldset {
border: none;
}
.form fieldset legend {
width: 100%;
padding: 0;
margin-bottom: 20px;
color: inherit;
font-size: 1.5rem;
line-height: 1.4;
}
.form-contrl {
margin-bottom: 20px;
}
.form-input {
display: inline-block;
padding: 0 10px;
max-width: 100%;
width: 100%;
height: 40px;
border: 1px solid #e5e5e5;
background: #fff;
color: #666;
}
.form-button{
display: inline-block;
margin: 0;
padding: 0 30px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
background-color: #1e87f0;
color: #fff;
font-size: .875rem;
line-height: 38px;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<div class="login-panel">
<form class="form">
<fieldset>
<legend>欢迎登录</legend>
<div class="form-contrl">
<input class="form-input" type="text" placeholder="请输入账号">
</div>
<div class="form-contrl">
<input class="form-input" type="password" placeholder="请输入密码">
</div>
<div class="form-contrl">
<button class="form-button">登录</button>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>