整图背景登录/注册页

来源：互联网发布：java判断质数的算法编辑：程序博客网时间：2024/06/06 19:10

html

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>登陆页</title>  <link rel="stylesheet" href="css/login.css"/></head><body><section>  <div>    <div>      <h1>公 &nbsp; 司</h1>      <div>        <span>登 &nbsp; 录</span>        <span>注 &nbsp; 册</span>      </div>    </div>    <div>      <div>        <span><img src="imgaes/mail.png" alt=""/></span>        <input type="text" placeholder="邮箱/手机号"/>      </div>      <div>        <span><img src="imgaes/lock.png" alt=""/></span>        <input type="password" placeholder="密码"/>      </div>      <div>        登 &nbsp; 录      </div>    </div>  </div></section></body></html>

less

html,body{ margin:0; height:100%;}body{ margin: 0; padding: 0; color: #fff; height: 100%; background: url("../imgaes/background.png") no-repeat; background-size:cover; img{  vertical-align: middle; } >section{  background:rgba(0,0,0,.2);  position: relative;  overflow-x: auto;  overflow-y: hidden;  width: 100%;  height: 100%;  >div{   width: 80%;   height: 80%;   max-width: 1200px;   max-height: 768px;   position: absolute;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%,-50%);   -moz-transform: translate(-50%,-50%);   -ms-transform: translate(-50%,-50%);   -o-transform: translate(-50%,-50%);   transform: translate(-50%,-50%);   >div:first-child{    h1{     margin: 0;     font-weight: normal;     padding: 10px 0 10px 50px;     display: inline-block;     font-size: 28px;    }    >div{     float: right;     line-height: 62px;     >span{      font-size: 16px;      padding: 8px 14px;      margin: 0 10px;     }     >span:last-child{      border: 1px solid #ccc;      border-radius: 6px;     }    }   }   >div:last-child{    width: 50%;    height: 50%;    text-align: center;    position: absolute;    top: 50%;    left: 50%;    -webkit-transform: translate(-50%,-50%);    -moz-transform: translate(-50%,-50%);    -ms-transform: translate(-50%,-50%);    -o-transform: translate(-50%,-50%);    transform: translate(-50%,-50%);    >div{     height: 65px;     line-height: 65px;     width: 60%;     display: inline-block;     margin: 14px auto;     border-bottom: 1px solid #fff;     text-align: left;     >span{      text-align: center;      display: inline-block;      width: 20%;      height: 60px;     }     >input{      background: transparent;      height: 100%;      border: none;      outline: none;      display: inline-block;      vertical-align: middle;      color: #ccc;      font-size: 18px;      width: 78%;     }     >input:active{      outline: none;     }    }    >div:last-child{     font-size: 20px;     border: 0;     background: rgba(27,113,184,.6);     border-radius: 30px;     text-align: center;     height: 65px;    }   }  } }}

0 0