超简易可使用登录界面制作

最新推荐文章于 2023-04-01 08:02:40 发布

曾某--智慧脑瓜

最新推荐文章于 2023-04-01 08:02:40 发布

阅读量420

点赞数 1

文章标签： html webview css javascript

本文链接：https://blog.csdn.net/zyg_web/article/details/122506713

版权

来吧，展示：

动态效果：

（注：使用了HTML CSS JavaScript）

HTML部分：

<body>
    <!-- 建立登录界面总体框架 -->
    <div class="box">
        <!-- form表单 使用js实现登录效果 -->
        <form onsubmit="fl(this)" action="#">
            <!-- 标题 -->
            <h4>智慧脑瓜--登录页面</h4>
            <!-- 账号密码 -->
            <div class="Inputting">
                <input type="text" placeholder="请输入用户名" id="username">
                <input type="password" placeholder="请输入密码" id="password">
            </div>
            <button class="Click" onsubmit="fl()">登录</button>
            <!-- 暂无实用效果 -->
            <div class="Attention">
                <label for="check"><input id="check" type="checkbox"><span></span><span></span>记住我</label>
                <a href="#" class="More">忘记密码?</a>
            </div>
            <div class="Bottom">
                <p>
                    还没有账号？
                    <a href="#" class="More">立即注册</a>
                </p>
            </div>
        </form>
    </div>
</body>

css:

 <style>
        * {
            /* 页面边距 */
            margin: 0;
            padding: 0;
            /* 规定边框 */
            box-sizing: border-box;
        }

        html {
            /* 字体 */
            font-size: 16px;
            /* 高 */
            height: 100%;
            /* 页面背景颜色 */
            background-image: linear-gradient(to right, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%);
        }
        .box {
            /* 弹性布局 */
            display: flex;
            /* 使弹性盒子必要时拆行 */
            flex-wrap: wrap;
            /* 在弹性盒对象的div元素中的各项周围留有空白 */
            justify-content: center;
            /* 外边距 */
            margin: 1rem;
            /* 定位，以便设置位置 */
            position: absolute;
            /* 大小 */
            width: 420px;
            height: 500px;
            /* 位置 */
            left: 35%;
            top: 15%;
            /* 圆角 */
            border-radius: 15px;
            box-shadow: 5px 7px 2px rgba(0, 0, 0, 0.3);
            /* 背景颜色 */
            background-image: linear-gradient(to right, #30cfd0 0%, #330867 100%);
        }
        /* 整体适应盒子大小 */
        .box form {
            width: 100%;
            max-width: 400px;
            margin-top: 13%;
        }
        /* 标题设置 */
        .box form h4 {
            color: #eee;
            font-weight: 100;
            font-size: 1.3rem;
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .box form .Inputting input,
        .box form .Click {
            /* 溢出隐藏，去浮动，解决外边距塌陷 */
            overflow: hidden;
            /* 大小 */
            width: 100%;
            /* 行高 */
            line-height: 2.5rem;
            height: 2.5rem;
            /* 下边距 */
            margin-bottom: 1.5rem;
            /* 字体颜色 */
            color: #eee;
            /* 背景颜色 */
            background-color: rgba(0, 0, 0, 20%);
            border: none;
            border-radius: 2.5rem;
            text-indent: 1rem;
        }

        .box form .Click {
            /* 文本居中 */
            text-align: center;
            /* 边框 */
            border: 1px solid #eee;
            
        }

        .box form .Inputting input::placeholder {
            /* 默认字体颜色 */
            color: #bbb;
        }

        .box form .Inputting input:hover {
            /* 鼠标悬停时背景颜色 */
            background-color: rgba(0, 0, 0, 30%);
        }

        .box form .Inputting input:focus {
            /* 点击时背景颜色 */
            background-color: rgba(0, 0, 0, 40%);
        }

        .Click {
            /* 鼠标样式 */
            cursor: pointer;
        }

        .Click:hover {
            /* 登录按钮鼠标悬停时背景颜色 */
            background-color: rgba(255, 255, 255, 60%) !important;
        }
        /* 暂无实用效果样式设置，不一一解释 */
        .Attention label {
            font-size: 00.8rem;
        }

        .Attention label input[type="cehckboox"] {
            display: none;
        }

        .Attention label input[type="cehckboox"]+span {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            padding: 2.3px;
            border: 1px solid #eee;
            /* 对齐 */
            vertical-align: middle;
            border-radius: 50%;
            margin-right: 5px;
        }

        .Attention label[tyoe="checkbox"]+span>span {
            float: left;
            width: 0.6rem;
            height: 0.6rem;
            background-color: #eee;
            border-radius: 50%;
            opacity: 0;
        }

        .Attention label[tyoe="checkbox"]:checked+span {
            background-color: #eee;
        }

        .Attention label:hover[tyoe="checkbox"]+span>span {
            opacity: .5;
        }

        .Attention label:hover[tyoe="checkbox"]:checked+span>span {
            opacity: 1;
        }

        .Attention {
            color: #eee;
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem !important;
        }


        .Attention {
            margin: 0.1rem;
        }


        .Bottom {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 60%);
            text-align: center;
        }

        .More {
            transition: color .5s;
        }

        .More :hover {
            color: #ccc;
        }
        /* 设置所有a标签样式 */
        a {
            /* 去除下划线 */
            text-decoration: none;
            /* 颜色 */
            color: #eee;
            /* 字体 */
            font-size: 0.8rem;
        }
    </style>

js:

<script>
        // 设置账号密码
        var p1 = {
            username: "csdn",
            password: "123456"
        };
        // 与服务端交换数据
        var str = JSON.stringify(p1);
        // 本地储存
        localStorage.setItem("user", str);

        function fl(object) {
            // 获取账号
            var userName = document.getElementById("username").value;
            // 测试用
            console.log(userName)
            // 获取密码
            var password = document.getElementById("password").value;
            // 测试用
            console.log(password)
            var str = localStorage.getItem("user");
            var obj = JSON.parse(str);
            console.log(obj)
            if (obj.username = userName && obj.password == password) {
                // 跳转至相应位置
                object.action = "https://www.csdn.net/"
            }
        }
    </script>

制作不易，求点赞关注收藏