Web前端开发用户登录代码_登录界面

前端登录页面开发|前端开发微信登录|网站前端开发

代码片段 :

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
<title>前端开发如何记录登录状态:登录界面</title>
<style type=”text/css” media=”screen”>
@mediascreenand(max-width:768px){
font-size:30px!important;
}
}
@mediascreenand(max-width:420px){
font-size:19px!important;
}
}
@mediascreenand(max-width:400px){
font-size:18px!important;
}
}
@mediascreenand(max-width:320px){
font-size:15px!important;
}
}
body{
padding:0px;
margin:0px;
}
ul,
li,
a{
padding:0px;
margin:0px;
list-style:none;
}
body{
background-color:#fdfdfd!important;
font-family:-apple-system,”.SFNSText-Regular”,”Helvetica Neue”,”Hiragino Sans GB”,”WenQuanYi Micro Hei”,”Microsoft Yahei”,sans-serif;
}
.sign{
max-width:20rem;
min-width:15rem;
margin:2.4remauto;
color:#333;
}
.sign.section{
background-color:#fff;
border:1pxsolid#ececec;
border-radius:2px;
padding:2rem2.5rem;
}
.sign.section.form{
width:100%;
height:15rem;
}
.form-item{
position:relative;
width:100%;
height:auto;
margin-bottom:1.5rem;
border-bottom:1pxsolid#ececec;
}
.form-item:first-child{
margin-bottom:1rem;
}
.form-item:last-child{
border:none;
}
.form-iteminput{
margin:0.5rem0.4rem;
font-size:0.73rem;
border:none;
outline:none;
box-shadow:none;
-webkit-box-shadow:none;
width:calc(100%-70px);
}
.form-item.bot-bar{
position:relative;
height:1px;
width:100%;
}
.bot-bar:before{
position:absolute;
bottom:-1px;
left:50%;
content:””;
height:1px;
width:0px;
background-color:#1B76C5;
box-shadow:1px1px3pxrgba(255,255,255,0.3);
transition: width ease-in-out.35s;
-moz-transition: width ease-in-out.35s;
-o-transition: width ease-in-out.35s;
-webkit-transition: width ease-in-out.35s;
}
.bot-bar:after{
position:absolute;
bottom:-1px;
right:50%;
content:””;
height:1px;
width:0px;
background-color:#1B76C5;
transition: width ease-in-out.35s;
-moz-transition: width ease-in-out.35s;
-o-transition: width ease-in-out.35s;
-webkit-transition: width ease-in-out.35s;
}
.form-itemh2{
text-align:center;
color:#5474db;
}
.form-iteminput:focus~.bot-bar:before{
width:50%;
}
.form-iteminput:focus~.bot-bar:after{
width:50%;
}
.form-item.icon{
margin:0.5rem0.5rem;
color:#5474db;
}
.form-item.info{
color:red;
position:absolute;
right:0px;
font-size:0.71rem;
}
.form-submit{
position:relative;
text-align:center;
background-color:#617fde;
border-radius:5px;
overflow:hidden;
padding:0.3rem;
color:aliceblue;
letter-spacing:0.1rem;
cursor:pointer;
line-height:1.6rem;
font-size:0.7rem;
height:1.6rem;
transition:allease-in-out.35s;
-moz-transition:allease-in-out.35s;
-o-transition:allease-in-out.35s;
-webkit-transition:allease-in-out.35s;
}
.form-submit:hover{
font-size:0.9rem;
background-color:#5474db;
}
.icon-mobile-phone:before{
font-size:2rem;
}
.icon-user-md:before{
font-size:1.2rem;
}
.form-submit:before{
font-size:0.9rem;
position:absolute;
top:0px;
left:0px;
content:attr(data-txt);
background-color:#617fde;
width:100%;
line-height:2.2rem;
letter-spacing:0.1rem;
overflow:hidden;
text-align:center;
height:1.1rem;
transition:topease-in-out.35s;
-moz-transition:topease-in-out.35s;
-o-transition:topease-in-out.35s;
-webkit-transition:topease-in-out.35s;
}
.form-submit:hover:before{
top:-1.1rem;
}
.form-submit:after{
font-size:0.9rem;
position:absolute;
bottom:0px;
left:0px;
content:attr(data-txt);
background-color:#617fde;
width:100%;
line-height:1px;
letter-spacing:0.1rem;
overflow:hidden;
text-align:center;
height:1.1rem;
transition:bottomease-in-out.35s;
-moz-transition:bottomease-in-out.35s;
-o-transition:bottomease-in-out.35s;
-webkit-transition:bottomease-in-out.35s;
}
.form-submit:hover:after{
bottom:-1.1rem;
}
</style>
</head>
<body>
<divclass=”sign”>
<divclass=”section”>
<formid=”form”>
<divclass=”form-item”>
<h2>登录主题</h2>
</div>
<divclass=”form-item”>
<iclass=”icon-user-md icon”></i>
<inputv-model=”user.name” v-on:click=”input_focus()” type=”text” class=”form-input” name=”name” placeholder=”用户姓名”>
<divclass=”bot-bar”></div>
</div>
<divclass=”form-item”>
<iclass=”icon-mobile-phone icon”></i>
<inputv-model=”user.phone” v-on:click=”input_focus()” type=”text” class=”form-input” name=”phone” placeholder=”电话号码”>
<divclass=”bot-bar”></div>
</div>
<divclass=”form-item”>
<iclass=”icon-envelope icon”></i>
<inputv-model=”user.email” v-on:click=”input_focus()” type=”text” class=”form-input” name=”email” placeholder=”电子邮箱”>
<divclass=”bot-bar”></div>
</div>
<divclass=”form-item”>
<divv-on:click=”m_submit(user)” class=”form-submit” data-txt=”Login”> Login </div>
</div>
</form>
</div>
</div>
</body>
</html>
前端开发代码网站|网页前端开发实用代码|前端主流代码开发工具
» 本文来自:前端开发者 » 《Web前端开发用户登录代码_登录界面》
» 本文链接地址:https://www.rokub.com/3700.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!