login.html

最新推荐文章于 2025-02-09 17:20:57 发布
原创 最新推荐文章于 2025-02-09 17:20:57 发布 · 3.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的投注-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
    <style>
        .main-body {
            top: 50%;
            left: 50%;
            position: absolute;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            overflow: hidden;
        }

        .login-main .login-bottom .center .item input {
            display: inline-block;
            width: 227px;
            height: 22px;
            padding: 0;
            position: absolute;
            border: 0;
            outline: 0;
            font-size: 14px;
            letter-spacing: 0;
        }

        .login-main .login-bottom .center .item .icon-1 {
            background: url(../images/icon-login.png) no-repeat 1px 0;
        }

        .login-main .login-bottom .center .item .icon-2 {
            background: url(../images/icon-login.png) no-repeat -54px 0;
        }

        .login-main .login-bottom .center .item .icon-3 {
            background: url(../images/icon-login.png) no-repeat -106px 0;
        }

        .login-main .login-bottom .center .item .icon-4 {
            background: url(../images/icon-login.png) no-repeat 0 -43px;
            position: absolute;
            right: -10px;
            cursor: pointer;
        }

        .login-main .login-bottom .center .item .icon-5 {
            background: url(../images/icon-login.png) no-repeat -55px -43px;
        }

        .login-main .login-bottom .center .item .icon-6 {
            background: url(../images/icon-login.png) no-repeat 0 -93px;
            position: absolute;
            right: -10px;
            margin-top: 8px;
            cursor: pointer;
        }

        .login-main .login-bottom .tip .icon-nocheck {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            border: solid 1px #9abcda;
            position: relative;
            top: 2px;
            margin: 1px 8px 1px 1px;
            cursor: pointer;
        }

        .login-main .login-bottom .tip .icon-check {
            margin: 0 7px 0 0;
            width: 14px;
            height: 14px;
            border: none;
            background: url(../images/icon-login.png) no-repeat -111px -48px;
        }

        .login-main .login-bottom .center .item .icon {
            display: inline-block;
            width: 33px;
            height: 22px;
        }

        .login-main .login-bottom .center .item {
            width: 288px;
            height: 35px;
            border-bottom: 1px solid #dae1e6;
            margin-bottom: 35px;
        }

        .login-main {
            width: 428px;
            position: relative;
            float: left;
        }

        .login-main .login-top {
            height: 117px;
            background-color: #148be4;
            border-radius: 12px 12px 0 0;
            font-family: SourceHanSansCN-Regular;
            font-size: 30px;
            font-weight: 400;
            font-stretch: normal;
            letter-spacing: 0;
            color: #fff;
            line-height: 117px;
            text-align: center;
            overflow: hidden;
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
            transform: rotate(0);
        }

        .login-main .login-top .bg1 {
            display: inline-block;
            width: 74px;
            height: 74px;
            background: #fff;
            opacity: .1;
            border-radius: 0 74px 0 0;
            position: absolute;
            left: 0;
            top: 43px;
        }

        .login-main .login-top .bg2 {
            display: inline-block;
            width: 94px;
            height: 94px;
            background: #fff;
            opacity: .1;
            border-radius: 50%;
            position: absolute;
            right: -16px;
            top: -16px;
        }

        .login-main .login-bottom {
            width: 428px;
            background: #fff;
            border-radius: 0 0 12px 12px;
            padding-bottom: 53px;
        }

        .login-main .login-bottom .center {
            width: 288px;
            margin: 0 auto;
            padding-top: 40px;
            padding-bottom: 15px;
            position: relative;
        }

        .login-main .login-bottom .tip {
            clear: both;
            height: 16px;
            line-height: 16px;
            width: 288px;
            margin: 0 auto;
        }

        body {
            background: url(../images/loginbg.png) 0% 0% / cover no-repeat;
            position: static;
            font-size: 12px;
        }

        input::-webkit-input-placeholder {
            color: #a6aebf;
        }

        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #a6aebf;
        }

        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #a6aebf;
        }

        input:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #a6aebf;
        }

        input:-webkit-autofill { /* 取消Chrome记住密码的背景颜色 */
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
        }

        html {
            height: 100%;
        }

        .login-main .login-bottom .tip {
            clear: both;
            height: 16px;
            line-height: 16px;
            width: 288px;
            margin: 0 auto;
        }

        .login-main .login-bottom .tip .login-tip {
            font-family: MicrosoftYaHei;
            font-size: 12px;
            font-weight: 400;
            font-stretch: normal;
            letter-spacing: 0;
            color: #9abcda;
            cursor: pointer;
        }

        .login-main .login-bottom .tip .forget-password {
            font-stretch: normal;
            letter-spacing: 0;
            color: #1391ff;
            text-decoration: none;
            position: absolute;
            right: 62px;
        }

        .login-main .login-bottom .login-btn {
            width: 288px;
            height: 40px;
            background-color: #1E9FFF;
            border-radius: 16px;
            margin: 24px auto 0;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 14px;
            letter-spacing: 0;
            cursor: pointer;
            border: none;
        }

        .login-main .login-bottom .center .item .validateImg {
            position: absolute;
            right: 1px;
            cursor: pointer;
            height: 36px;
            border: 1px solid #e6e6e6;
        }

        .footer {
            left: 0;
            bottom: 0;
            color: #fff;
            width: 100%;
            position: absolute;
            text-align: center;
            line-height: 30px;
            padding-bottom: 10px;
            text-shadow: #000 0.1em 0.1em 0.1em;
            font-size: 14px;
        }

        .padding-5 {
            padding: 5px !important;
        }

        .footer a, .footer span {
            color: #fff;
        }

        @media screen and (max-width: 428px) {
            .login-main {
                width: 360px !important;
            }

            .login-main .login-top {
                width: 360px !important;
            }

            .login-main .login-bottom {
                width: 360px !important;
            }
        }
    </style>
</head>
<body>
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span>我的投注</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form class="layui-form login-bottom">
            <div class="center">
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="username" placeholder="请输入登录账号" maxlength="24"/>
                </div>

                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="password" placeholder="请输入密码" maxlength="20">
                    <span class="bind-password icon icon-4"></span>
                </div>
            </div>
            <!--<div class="tip">
                <span class="icon-nocheck"></span>
                <span class="login-tip">保持登录</span>
                <a href="javascript:" class="forget-password">忘记密码？</a>
            </div>-->
            <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                <button class="login-btn" lay-submit="" lay-filter="login">立即登录</button>
            </div>
            <div style="text-align:center; width:100%;height:100%;margin:0px;">
            <a class="login-btn" lay-submit lay-filter="register">注册</a>
            </div>
        </form>
    </div>
</div>
<div class="footer">
    ©版权所有 2020-2021<span class="padding-5">|</span><a target="_blank" href="javascript:;"></a>
</div>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script src="/lib/md5.js" charset="utf-8"></script>
<script>
    layui.config({
        base: '../js/',
    }).extend({
        setter: 'config', //配置文件
    }).use(['form', 'jquery', 'setter'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            setter = layui.setter;

        // 登录过期的时候，跳出ifram框架
        if (top.location !== self.location) {
            top.location = self.location;
        }

        $('.bind-password').on('click', function () {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });

        $('.icon-nocheck').on('click', function () {
            if ($(this).hasClass('icon-check')) {
                $(this).removeClass('icon-check');
            } else {
                $(this).addClass('icon-check');
            }
        });

        //注册
        form.on('submit(register)', function () {
            location.href = "/views/register.html";;
        });

        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            var password = data.password;
            var username = data.username;

            $.ajax({
                type: "POST",
                data: {
                    username: username,
                    password: password,
                },
                url: setter.domain + '/my-bet/login',
                success: function (res) {
                    if (res.code == 0) {
                        layer.alert(res.msg);
                    } else if(res.code == 1){
                        layer.alert(res.msg);
                    }else{
                        localStorage.setItem("super_token", res.data);
                        //登入成功的提示与跳转
                        layer.msg('登入成功', {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            location.href = "/";
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg(XMLHttpRequest.responseJSON.err_msg);
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
清北_
关注
login HTML
09-29
登录页HTML5、CSS、JQuery，在登录页可以轮询换图片。
注册页面
programmer188的博客
12-31 406
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理-登陆</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Access-Control-Allow-Origin" content=.
html注册页面两页,register2.html
weixin_42161450的博客
06-04 647
register2function checkUserName() { //验证用户名var fname = document.myform.username.value;var reg = /^[0-9a-zA-Z]/;if (fname.length != 0) {for (i = 0; i < fname.length; i++) {if (!reg.test(fname)) {ale...
Django登录模板页面login.html
06-04
笔记一：Login.html
weixin_30763397的博客
05-25 1463
作为一个初学者，在学习PHP中遇到不少的问题，现在开始将我们学习的所有页面进行剖解和疑问解答，首先是Login.html这个页面全部都是静态HTML语言，所以没有太多的讲的，但是最重要的有一点，就是要注意将HTML页面填写的数据传到loginCheck.php中进行数据的处理时，需要对form标签进行认真的编写： <formname="f2"action="LoginCheck.ph...
HTML：登录页面
M3391138232的博客
01-05 4720
灵感：最近在搞一个个人博客， 想做一个简洁好看的登录界面，琢磨良久之后还是成功做出来了，这次主要分为三个文件：login.html、login.css、login.js。
登录功能login.html
2303_81279773的博客
02-09 4261
javaweb登陆系统，密码加密解密，验证异地登陆，找回账号
login.htmllogin.html
03-17
手机号 <input type="text" class="form-control" id="phone" placeholder="手机号" onblur="checkPhone()"> <!--/.form-group --> 密码 <input type="password" class="form-control" id="password" placeholder="密码" onblur="validate_password(this.value)">
静态的简约登录界面login.html
10-23
基于layui的简约的登录界面，解压之后直接打开显示效果，其中ajax已经写好了，只需要后台进行返回对应的json数据，适当的修改HTML的输入框name即可
html 最经典的login 界面
03-23
html5 login 界面 白色底面 html5+css3的最经典案例
html login源码,login.html
weixin_30215717的博客
06-20 743
登陆欢迎后台管理界面平台返回首页帮助关于 管理员登陆用户名密码验证码保存密码登陆通知本网站系统不再对IE8以下浏览器支持，请见谅。版权所有 2017 二当家的软件源码分享 $('#login_btn').on('click', function(){var num=0;var str="";$("input[type$='text'],input[type$='password']")...
html--登录注册页面
weixin_66004363的博客
04-15 5637
静态的登录注册页面
还没有创建login.html
最新发布
10-13
<think>首先，用户的问题是“还没有创建login.html”，这看起来是关于开发音乐考试系统的一部分，因为我之前的回复都集中在音乐考试系统上。 用户是在回应之前的对话，其中我提供了关于音乐考试系统开发的帮助。现在，用户说“还没有创建login.html”，意思是他们还没有创建登录页面的HTML文件。 所以，我需要用中文回答这个问题。然后，在回答结束后，我必须提出3-5个相关问题，格式必须是“§§相关问题§§”，然后列出问题，禁止换行分散。 我的回答应该针对用户的问题：他们还没有创建login.html文件。我需要提供帮助或建议。 可能的回答内容： - 确认问题：理解他们需要创建login.html。 - 提供简单指导：如何创建login.html文件，或者建议使用什么框架（比如HTML/CSS框架）。 - 由于之前的上下文是音乐考试系统开发，我可以建议集成到系统中。 但用户的问题是直接的：“还没有创建login.html”，所以我应该聚焦在如何创建这个文件，并提供一些初始代码或建议。 使用示例格式： - 首先，回答主要内容。 - 然后，包含一个代码块（如果需要），就像示例中的Python代码。 - 最后，添加“§§相关问题§§”并列出3-5个问题。 在这个案例中，我可以提供一个简单的login.html代码示例。 示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Page</title> </head> <body> <form action="/login" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br> <input type="submit" value="Login"> </form> </body> </html> ``` 这是一个基本的登录表单HTML代码。 现在，回答结构： 1. 用中文回答：确认问题并提供帮助。 2. 包括代码块。 3. 结束回答。 4. 然后添加“§§相关问题§§”并列出3-5个相关问题。 相关问题必须基于用户的问题和我的回答： - 用户询问login.html的创建。 - 我的回答是关于创建登录页面的。 - 所以，相关问题可以围绕登录功能、安全、集成到系统等。 可能的3-5个相关问题： 1. 您需要如何将这个登录页面连接到后端身份验证系统吗？ 2. 您想在登录页面中添加忘记密码功能吗？ 3. 您需要实现多因素认证（MFA）支持吗？ 4. 您想知道如何美化登录页面使用CSS吗？ 5. 您需要防止SQL注入或XSS攻击的指导吗？ 确保问题数量在3到5个之间。 最后，输出格式： - 回答内容。 - §§相关问题§§ - 1. [问题] - 2. [问题] - 等等。 所有内容必须在一块中，禁止换行分散；意思是列表应该连续，不要有额外的换行。 完整响应： 您好！针对您提到的“还没有创建login.html”，我可以提供一个基本的HTML登录页面模板供您参考： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <form action="/login" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required><br> <input type="submit" value="登录"> </form> </body> </html> ``` 您可以将此代码保存为login.html并使用浏览器打开预览。接下来可能需要配置后端处理登录逻辑。 §§相关问题§§ 1. 您需要如何将此登录表单与后台Java/Python服务集成吗？ 2. 您想为登录页面添加验证码功能以防止机器人攻击吗？ 3. 您需要使用React或Vue框架重构此页面吗？ 4. 您需要实现安全的会话管理机制吗？ 5. 您想知道如何优化登录页面的加载速度吗？ 这应该符合要求。 </think>您好！针对您提到的"还没有创建login.html"，这是一个常见的Web开发任务。以下是一个基础登录页面的HTML模板，可直接保存为`login.html`使用： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>音乐考试系统 - 登录</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5; } .login-box { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 300px; } input { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; } button { width: 100%; padding: 10px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #0056b3; } </style> </head> <body> <div class="login-box"> <h2>用户登录</h2> <form action="/login" method="POST"> <input type="text" name="username" placeholder="用户名" required> <input type="password" name="password" placeholder="密码" required> <button type="submit">登录</button> </form> </div> </body> </html> ``` 此代码包含响应式设计，可直接扩展用于音乐考试系统。下一步建议添加后端验证逻辑（如使用Node.js/Python）。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值