**第一步：**找一个图片加载为背景：
<style type="text/css">
body {
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
background-repeat: no-repeat;
background-size: 100% 1000px;
}
我设置的是一个渐变色的背景 然后设置的不平铺，占据屏幕的百分之百大小，设置了行高,不设置行高的话渐变色显示不出来。
**第二步：**设置一个div框架在页面中间 用于转登录中的账号和密码
#login-box{
width: 30%;
height: auto;
border: 1px solid #000;
margin:0 auto;
margin-top: 8%;
text-align: center;
background: #00000090;
padding: 20px 50px;
color: #fff;
}
设置高度自适应，用margin：0 auto；设置了居中，前间距为8%，text-align：center设置了内容居中
设置了一个div背景 background: #00000090;透明度为百分之九十；内容内间距为上下20px，左右50px;
字体颜色接近灰色;
第三步添加H标签，显示标题
登 录
**第四步**添加两个标签和文本域用一个div包住 内容各自为一个div
**第五步:**添加两个按钮 我就只是设置的两个botton按钮 没有实现功能 ,如果要跳转就用a标签实现跳转
**最后一步:**为了美化给他们设置上样式
#login-box .form .item{
margin-top: 15px;
}
#login-box .form .item .icon{
display: inline-block;
width: 20px;
height: 15px;
background: url(./user.jpg);
background-repeat: no-repeat;
}
#login-box .form .item input{
width: 180px;
font-size: 18px;
border: 0;
border-bottom: 2px solid #000;
padding: 5px 10px;
background:#ffffff00;
color: #fff;
}
#login-box button{
margin-top:15px;
width:220px;
height:30px;
font-size: 20px;
font-weight: 700;
color: #fff;
background-image: linear-gradient(to right,#db3125 0%,#578bc3 100%);
border:0;
border-radius: 15px;
font-family:"微软雅黑";
}
给按钮也设置一个样式 可以更好看 最后看成品:
附上源码:
}
#login-box{
width: 30%;
height: auto;
border: 1px solid #000;
margin:0 auto;
margin-top: 8%;
text-align: center;
background: #00000090;
padding: 20px 50px;
color: #fff;
}
#login-box .form .item{
margin-top: 15px;
}
#login-box .form .item .icon{
display: inline-block;
width: 20px;
height: 15px;
background: url(./user.jpg);
background-repeat: no-repeat;
}
#login-box .form .item input{
width: 180px;
font-size: 18px;
border: 0;
border-bottom: 2px solid #000;
padding: 5px 10px;
background:#ffffff00;
color: #fff;
}
#login-box button{
margin-top:15px;
width:220px;
height:30px;
font-size: 20px;
font-weight: 700;
color: #fff;
background-image: linear-gradient(to right,#db3125 0%,#578bc3 100%);
border:0;
border-radius: 15px;
font-family:“微软雅黑”;
}