超简单的登录网页实现

2021/9/3 23:10:48

编程Tag： 网页登录 width height background color 简单 border 0px

本文主要是介绍超简单的登录网页实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTML+CSS+JS！好看的登录页面！

)

废话上说，直接上图！ (^_−)☆ 在这里插入图片描述

全部代码：

<!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>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            display: flex;
            justify-content: center;
            background-image: url("img/bgi2.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        h2 {
            margin: 20px 0px;
        }
        
        .main {
            margin-top: 15%;
            height: 300px;
            /* background-color: rgb(7, 144, 185); */
            color: #fff;
        }
        
        h1 {
            text-align: center;
        }
        
        .body {
            /* background-color: chocolate; */
        }
        
        .li {
            margin: 45px 0px;
            width: 347px;
            height: 45px;
            border-radius: 25px;
            opacity: 0.6;
        }
        
        .li1 {
            margin: 15px 0px;
            width: 347px;
            height: 45px;
            border-radius: 25px;
        }
        
        .imgsize {
            width: 45px;
            height: 45px;
            border-radius: 20px 0px 0px 20px;
        }
        
        .number {
            float: right;
            width: 300px;
            height: 44px;
            border: 1px solid rgb(255, 255, 255);
            border-radius: 0px 20px 20px 0px;
        }
        
        .but {
            width: 347px;
            height: 45px;
            border-width: 0px;
            border-radius: 25px;
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            background-color: rgb(20, 190, 105);
        }
        
        .lii {
            margin: 15px 0px;
            width: 347px;
            height: 45px;
            border-radius: 25px;
            text-align: center;
            color: rgb(255, 255, 255);
        }
        
        .but1 {
            display: inline-block;
            width: 44px;
            height: 24px;
            background-color: rgb(207, 207, 207);
            border-radius: 12px;
        }
        
        .yuan {
            display: inline-block;
            width: 23px;
            height: 23px;
            border-radius: 15px;
            background-color: #fff;
            left: -10px;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="main">
        <h1>LOGO</h1>
        <div class="body">
            <form action="" method="POST">
                <div class="li">
                    <img class="imgsize" src="img\我的.png" alt="账号">
                    <input class="number" type="text" placeholder="账号">
                </div>
                <div class="li">
                    <img class="imgsize" src="img\密码.png" alt="密码">
                    <input class="number" type="text" placeholder="密码">
                </div>
                <div class="li1">
                    <input class="but" type="button" value="登录">
                </div>
                <div class="lii">
                    <span style="margin-right: 164px;">
                        <span class="but1" id="but1">
                             <span class="yuan" id="dian" onclick="LTR()"></span>
                    </span>
                    <b>记住密码</b>
                    </span>
                    <span><b>忘记密码</b></span>


                </div>
            </form>
        </div>
    </div>
    <script>
        function LTR() {
            var p = document.getElementById("dian");
            var b = document.getElementById("but1");
            if (p.style.left == "10px") {
                p.style.left = "-10px";
                b.style.backgroundColor = "rgb(99, 99, 99)";
            } else {
                p.style.left = "10px";
                b.style.backgroundColor = "rgb(20, 190, 105)";
            }
        }
    </script>
</body>

</html>

感觉不错的话！可以个点赞哦，这将会是XXX的最大鼓励！Thanks♪(･ω･)ﾉ

这篇关于超简单的登录网页实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

超简单的登录网页实现

HTML+CSS+JS！好看的登录页面！

相关编程文章