html code
<header>
<div class="nav">
<span class="close-btn"></span>
<a href="" class="register-btn">注册</a>
</div>
<h1>欢迎登录平安官网</h1>
</header>
<div class = "the Login-the Tab">
<ul class = "the Tab">
<li class = "NO"> SMS verification code login </ li>
<li> Account password </ li>
</ ul>
<ul = class "the Tab-Content">
<li>
<div class = "tel the iNPUT-Item-Item">
<the iNPUT class = "tel" placeholder = "Please enter the phone number / user name / ID">
<span> < / span>
</ div>
<div class = "the iNPUT-Item code-Item">
<the iNPUT of the type = "text" class = "tel" placeholder = "Please enter your password">
<the Button class = "code-btn"> Forgot your password? </ the Button>
</ div>
</ li>
</ ul>
<div class = "the Login">
<the Button of the type = "text" value = "login"> Log </ the Button>
</ div>
<the p-class = "Tips"> sign means that you have agree
<a href="https://member.pingan.com.cn/pinganone/pa/paoasp.screen"> "Privacy Policy and Terms of Service" </a>
</ the p->
</div>
CSS code
* {
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;
}
.are not{
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;
}
.but {
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-side page
End mobile page
