超简单的登录网页实现

2021-09-03 22:31:27 阅读：163 来源： 互联网

标签：网页登录 color height width background 简单 0px border

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♪(･ω･)ﾉ

标签：网页,登录,color,height,width,background,简单,0px,border
来源： https://blog.csdn.net/qq_39114437/article/details/120091003

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

超简单的登录网页实现

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