CSS-移动端自适应登录界面

html代码

<header>
     <div class="nav">
         <span class="close-btn"></span>
         <a href="" class="register-btn">注册</a>
    </div>
     <h1>欢迎登录平安官网</h1>
</header>

<div class="login-tab">
　　<ul class="tab">
　　　　<li class="no">短信验证码登陆</li>
　　　　<li>账号密码登录</li>
　　</ul>
　　<ul class="tab-content">
　　　　<li>
　　　　　　<div class="input-item tel-item">
　　　　　　　　<input class="tel" placeholder="请输入手机号码/用户名/身份证">
　　　　　　　　<span></span>
　　　　　　　</div>
　　　　　　<div class="input-item code-item">
　　　　　　　　<input type="text" class="tel" placeholder="请输入密码">
　　　　　　　　<button class="code-btn" >忘记密码?</button>
　　　　　　</div>
　　　　</li>
　　</ul>
　　<div class="login">
　　　　<button type="text" value="登录">登录</button>
　　</div>
　　<p class="tips">登录即表示您已同意
　　　　<a href="https://member.pingan.com.cn/pinganone/pa/paoasp.screen">《隐私条款和服务条款》</a>
　　</p>

</div>

 

CSS代码

* {

　　padding: 0;

　　margin: 0;

　　text-decoration: none;

　　list-style: none;

}

header {

　　display: block;

　　height:10rem;

　　padding-top: .2rem;

　　background-size: 100% 100%;

　　background-color:#FF8040;

}

.nav{

　　display: -webkit-box;

　　display: -ms-flexbox;

　　display: flex;

　　-webkit-box-align: center;

　　-ms-flex-align: center;

　　align-items: center;

　　-webkit-box-pack: justify;

　　-ms-flex-pack: justify;

　　justify-content: space-between;

　　height: .48rem;

　　padding: 0 .4rem;

}

.register-btn {

　　display: block;

　　width: 1.88rem;

　　height: 0.48rem;

　　line-height:0.48rem;

　　border: 1px solid #fff;

　　border-radius: 2px;

　　text-align: center;

　　color: #fff;

　　font-size: .28rem;

　　margin-top: 1rem;

　　padding: 0.4rem 0;

}

h1 {

　　margin: 30px 0;

　　padding: 2rem 1.56rem;

　　font-size: 2rem;

　　color: #fff;

}

.login-tab{

　　margin-top: 2.32rem;

　　background:#fff;

}

.tab{

　　display: flex;

　　height: 3rem;

　　padding: 0 .4rem;

　　border-bottom: 1px solid #ddd;

}

.tab li{

　　position: relative;

　　-webkit-box-flex:1;

　　flex:1;

　　height: 1rem;

　　line-height: 1rem;

　　margin:0 .4rem;

　　text-align: center;

　　font-size: 1.32rem;

　　-webkit-tap-highlight-color: transparent;

　　color:#ff6633;

}

.tab .no::after{

　　content:'';

　　display: block;

　　position: absolute;

　　left:0;

　　bottom:-1px;

　　width:100%;

　　height: 2px;

　　background:#f05a23;

　　top:48px;

}

.tab-content li{

　　margin: 3.5rem 0 0 2.5rem;

}

.input-item {

　　box-sizing: border-box;

　　display: flex;

　　-webkit-box-align: center;

　　align-items: center;

　　border-bottom: 1px solid #ddd;

　　margin-right: 2.3rem;

}

.input-item input{

　　-webkit-appearance: none;

　　margin: 6px;

　　border: none;

　　outline: none;

　　-webkit-box-flex: 1;

　　flex: 1;

　　padding: 0.5rem .14rem;

　　font-size: .9rem;

　　color: #171717;

　　margin-top: 1rem;

}

.input-item:first-child{

　　margin-bottom: 2.26rem;

}

.code-btn{

　　margin: 0 1.4rem 0 0;

　　color: #ff8028;

　　font-size: 18px;

　　border: none;

　　background: #fff;

}

.login{

　　padding: 40px;

}

.login button{

　　display: block;

　　margin: 0 auto;

　　width: 20rem;

　　height: 3rem;

　　border: 0;

　　background: #ff8028;

　　color: #fff;

　　font-size: 18px;

}

.tips{

　　margin-top: .38rem;

　　text-align: center;

　　color: #616161;

　　font-size: 0.8rem;

}

 

 

PC端页面

 

 移动端页面

 

 

 

 

转载于:https://www.cnblogs.com/combating/p/11450604.html