<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="b_clear">
<div class="nav_logo l_float">
<img src="imgs/logo.svg" alt="">
</div>
<div class="nav_link r_float">
<ul>
<li><a href="#">返回首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="login_body l_clear">
<div class="login_form l_float">
<div class="login_top">
<img src="imgs/logo_z.svg" alt="" class="">
<div class="login_tags b_clear">
<span class="top_tag l_float active" onClick="PwdLogin()">密码登录</span>
<span class="top_tag r_float" onClick="QrcodeLogin()">扫码登录</span>
</div>
</div>
<div class="login_con">
<form action="" method="POST">
<div>
<label for="user_name">用户名</label>
<input type="text" name="" id="user_name" placeholder="账号/手机号/邮箱">
<img src="imgs/icons/user.svg">
<p class="tips hidden">请检查您的账号</p>
</div>
<div>
<label for="user_pwd">密码</label>
<input type="password" name="" id="user_pwd" placeholder="请输入账户密码">
<img src="imgs/icons/lock.svg">
<p class="tips hidden">请检查您的密码</p>
</div>
<div class="b_clear">
<label for="auth_code" class="b_clear">验证码</label>
<input type="text" name="" id="auth_code" placeholder="" class="l_float" maxlength="6">
<button class="auth_code l_float">获取验证码</button>
<img src="imgs/icons/auth_code.svg">
<p class="tips hidden">验证码错误</p>
</div>
<div class="b_clear submit">
<button type="submit">登 录</button>
<a href="#" class="r_float">忘记密码？</a>
<p class="tips hidden">登录失败，请检查您的账户与密码</p>
</div>
</form>
</div>
<div class="login_con hidden">
<div class="qr_code">
<img src="imgs/qr.png" alt="">
<p>请使用微信扫码登录<br>仅支持已绑定微信的账户进行快速登录</p>
</div>
</div>
<div class="login_otherAccount">
<span>第三方登录</span>
<a href="http://"><img src="imgs/icons/wechat.svg" alt="微信登录"></a>
<a href="http://"><img src="imgs/icons/weibo.svg" alt="微博登录"></a>
<a href=""><img src="imgs/icons/qq.svg" alt="QQ登录"></a>
</div>
</div>
<div class="login_ad l_float" id="AdImg">
<a href="">查看详情</a>
</div>
</div>
<div class="footer">
<p>Copyright © 2013-2018 <a href="#">赫伟创意星空</a></p>
<!-- <a href="http://www.beian.gov.cn/" target="_blank"><img src="imgs/icons/national_emblem.svg" alt="公安部备案">蒙公网安备15020302000160号</a> -->
<a href="http://www.miitbeian.gov.cn/" target="_blank"><img src="imgs/icons/icp_record_filing.svg" alt="工信部备案">蒙ICP备15000557号</a>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
<!--
本站版权归赫伟创意星空
网站开发请联系我们
微信：qiao776338064 -->
html 扫码登录页面制作模版
需积分: 0 144 浏览量
2024-04-26
10:22:43
上传
评论
收藏 143KB ZIP 举报
html扫码登录.zip （17个子文件） 
js 
login.js 4KB css style.css 7KB
index.html 5KB imgs .DS_Store 8KB
qr.png 2KB
logo.svg 892B
timg.jpg 117KB logo_z.svg 715B icons .DS_Store 6KB national_emblem.svg 33KB user.svg 1KB lock.svg 1KB icp_record_filing.svg 4KB auth_code.svg 2KB wechat.svg 1KB qq.svg 2KB weibo.svg 2KB资源评论
