html+css+js多用途登录页面模板_HTML登录页面资源-CSDN文库

共7个文件

png：3个

css：1个

js：1个

html

javascript

需积分: 5 109 浏览量 2024-04-10 16:03:38 上传评论收藏 136KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

H5多用途登录页面.rar （7个子文件）

jquery.js 384KB

css

style.css 3KB

index.html 2KB

images

wechat-login.png 8KB

user.png 6KB

password.png 4KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"> <title>登录</title> <link rel="stylesheet" href="css/style.css"> </head> <body class="login-bg"> <div class="login-contain"> <div class="login-header"> <p>欢迎登录</p> </div> <div class="form-group"> <div class="form-item"> <label for="username"> <img src="images/user.png"> </label> <input id="username" type="text" placeholder="请输入账号"> </div> <div class="form-item"> <label for="password"> <img src="images/password.png" alt=""> </label> <input id="password" type="password" placeholder="请输入密码"> </div> </div> <div class="button-group"> <button class="login-btn" id="doLogin">登录</button> </div> <div class="order-login"> <p class="order-login-line">其他登录方式</p> <div class="order-login-box"> <div> <a href="#"> <img src="images/wechat-login.png" alt="" style="width: 45px;height: 45px;"> <p>微信登录</p> </a> </div> </div> </div> </div> <script src="js/jquery.js"></script> <script> $(function() { $(window).resize(); }); //js设置居中 $(window).resize(function() { $(".login-contain").css({ position: "absolute", left: ($(window).width() - $(".login-contain").outerWidth()) / 2, top: ($(window).height() - $(".login-contain").outerHeight()) / 2 }); }); </script> </body> </html>

评论收藏

内容反馈