ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

超简单的登录网页实现

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

标签:网页 登录 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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有