bootstrap+css实现登陆注册点击切换

2022年7月5日 1483点热度 0人点赞 0条评论
兄弟们,下午好,想了很久,不知道写点什么,就写点通知的吧,就比如,今天写了什么代码,把他提前录制出来,也是同步时间发布,这一期带来的
源码大家在公众号回复下面数字
也可以直接翻到下面,进行复制
wh172125

这是样式图

图片

代码部分

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>登陆注册</title>    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">    <style>        .login-register-form-section{            max-width: 350px;            margin: 220px  auto;        }        .login-register-form-section i{            width: 10px;        }        .login-register-form-section .nav-tabs > li > a{            color: #59CBAE;        }
.login-register-form-section .nav-tabs > li.active > a{ background-color: #59CBAE; border-color: #59CBAE; color: white; } .login-register-form-section .nav-tabs > li > a, .login-register-form-section .nav-tabs > li.active > a{ width: 160px; /* 字体居中 */ text-align: center; border-radius: 0; }
.login-register-form-section .nav-tabs{ padding-bottom: 10px; margin-bottom: 10px; } .login-register-form-section .btn-custom{ width: 100%; background-color: #59CBAE; border-color: #59CBAE; margin-bottom: 0.5em; border-radius: 0; } .login-register-form-section .btn-custom:hover{ width: 100%; background-color: #47a68e; border-color: #47a68e; } .login-register-form-section .form-group{ padding: 0 20px; }</style>
</head><body> <div class="row"> <div class="container"> <div class="login-register-form-section"> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#login" data-toggle="tab" >登陆</a></li> <li> <a href="#register" data-toggle="tab">注册</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="login"> <form class="form-horizontal" method="post" action=""> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-user"></i></div> <input type="text" name="login_email" class="form-control" placeholder="请输入用户名" required="required" value=""> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-key"></i></div> <input type="password" name="login_password" class="form-control" placeholder="请输入密码" required="required" > </div> </div> <div class="form-group"> <input type="checkbox" id="remeberMe"> <label for="remeberMe">记住密码</label> <a href="#" class="pull-right">忘记密码?</a> </div> <input type="submit" value="登陆" class="btn btn-success btn-custom"> </form> </div> <div role="tabpanel" class="tab-pane fade" id="register"> <form class="form-horizontal" method="post" action=""> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-user"></i></div> <input type="text" name="register_email" class="form-control" placeholder="用户名" required="required" value=""> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-male"></i></div> <input type="text" name="register_fullname" class="form-control" placeholder="网名" required="required" value=""> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-envelope"></i></div> <input type="text" name="register_email" class="form-control" placeholder="邮箱" required="required" value=""> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-lock"></i></div> <input type="text" name="register_password" class="form-control" placeholder="密码" required="required" value=""> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-lock"></i></div> <input type="text" name="register_cpassword" class="form-control" placeholder="确认密码" required="required" value=""> </div> </div> <input type="submit" value="注册" class="btn btn-success btn-custom"> </form> </div> </div> </div> </div> </div>


<script src="https://gapis.geekzu.org/ajax/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></body></html>

49460bootstrap+css实现登陆注册点击切换

这个人很懒,什么都没留下

文章评论