简单易懂登录页面

最新推荐文章于 2024-05-15 21:00:37 发布
【远远不远】
最新推荐文章于 2024-05-15 21:00:37 发布
阅读量698
点赞数 1
文章标签： css3 css html
本文链接：https://blog.csdn.net/m0_51681930/article/details/121907157
版权
<!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>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .myid {
            position: fixed;
            font-size: 15px;
            bottom: 0px;
            right: 0px;
        }

        .loginback {
            position: fixed;
            left: 0px;
            top: 21px;
        }

        .one {
            /* background-image: linear-gradient(to right, #000000, #5f5f5f); */
            position: fixed;
            width: 100%;
            height: 100%;
        }

        .login {
            position: absolute;
            left: 50%;
            top: 200px;
            width: 300px;
            margin-left: -150px;
        }

        .title {
            width: 100%;
            text-align: center;
            height: 50px;
            line-height: 40px;
            font-size: 25px;
            color: #b6b7b8;
            text-shadow: 5px 5px 5px #000000;
            margin-bottom: 21px;
        }

        .username_password {
            position: relative;
            width: 100%;
            height: 50px;
        }

        .username_password input {
            position: relative;
            width: 100%;
            color: #b6b7b8;
            font-size: 16px;
            background-color: transparent;
            border: 0;
            border-bottom: 1px solid #b6b7b8;
            outline: none;
            z-index: 10;
        }

        .username_password label {
            position: absolute;
            left: 0;
            top: -5px;
            font-size: 20px;
            color: #b6b7b8;
            transition: all .5s;
        }

        .username_password input:focus+label,
        .username_password input:valid+label {
            top: -20px;
            font-size: 16px;
        }

        .btn {

            width: 80px;
            height: 40px;
            text-align: right;
            padding: 10px;
            /* 上下左右内边距 */
            margin-top: 10px;
            border: 0;
            color: #b6b7b8;
            text-transform: uppercase;
            letter-spacing: 2px;
            background-color: #6d6c6c;


        }

        .btn:hover {
            cursor: pointer;
            background-color: #b6b7b8;
            box-shadow: 0 0 5px#b6b7b8,
                0 0 25px #b6b7b8,
                0 0 50px #b6b7b8,
                0 0 75px #b6b7b8;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: aliceblue;

        }

        .search-box {
            position: absolute;
            top: 15%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #575a5f;
            height: 35px;
            border-radius: 40px;
            padding: 10px;
        }

        .search-box:hover>.search-txt {
            width: 200px;
            padding: 0 6px;
        }

        .search-box:hover>.search-btn {
            background-color: white;
        }

        .search-btn {
            color: violet;
            float: right;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgb(189, 189, 189);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.4s;
        }

        .search-txt {
            border: none;
            background: none;
            outline: none;
            float: left;
            padding: 0;
            color: white;
            font-size: 16px;
            transition: 0.4s;
            line-height: 40px;
            width: 0px;
        }
    </style>

    <script type="text/javascript">
        function login() {
            var x = document.getElementById("one").value;
            var y = document.getElementById("two").value;
            x = parseFloat(x);
            y = parseFloat(y);
            if (x == 13945892899 && y == 13945892899) {
                window.open('first.html');
            }
            else {
                alert("账号、密码均为：13945892899")
            }
        }
    </script>

    <script type="text/javascript">
        function disptime() {
            var today = new Date();
            var yy = today.getFullYear();
            var mo = today.getMonth() + 1;
            var dd = today.getDate();
            var hh = today.getHours();
            var mm = today.getMinutes();
            var ss = today.getSeconds();
            var day = today.getDay();
            var a = "AM";
            if (hh > 12) {
                hh = hh - 12;
                a = "PM";
            }
            var week = 0;
            switch (day) {
                case 0:
                    week = "Sun.";
                    break;
                case 1:
                    week = "Mon.";
                    break;
                case 2:
                    week = "Tue.";
                    break;
                case 3:
                    week = "Wed.";
                    break;
                case 4:
                    week = "Thu.";
                    break;
                case 5:
                    week = "Fri.";
                    break;
                case 6:
                    week = "Sat.";
                    break;
            }
            var myTime = setTimeout("disptime()", 1000);/* at nine（o’clock） */
            document.getElementById("myclock").innerHTML = "" + a + "&nbsp" + "Coming" + "&nbsp" + "cheerful" + "&nbsp" + week + '</br>' + "Now" + "&nbsp" + "At" + "&nbsp" + hh + "&nbsp" + "o’clock" + "</h4>";
        }
        var myTime = setInterval("disptime()", 1000);
    </script>



    <embed src="F:\web\期末作业\music\login.mp3" hidden="true" autostart="true" loop="true">
</head>

<body>

    <div class="one">
        <div><img src="img/login.gif" width="100%" height=" 100%"></div>
        <div class="loginback"><img src="img/1.png" width="60px" height="60px"></div>
        <div class="myid">Dear Mercedes owner<div id="myclock"></div>
            <div class="myid"></div>
        </div>
        <div class="login">
            <div class="title">登录</div>
            <form action="">
                <div class="username_password">
                    <input type="text" id="one" value="" size="20" placeholder="" required />
                    <label for="">username</label>
                </div>
                <div class="username_password">
                    <input type="password" id="two" value="" size="20" placeholder="" required />
                    <label for="">password</label>
                </div>
                <input class="btn" type='button' name="lijiayuan" style="margin-left: 220px;margin-top: 20px;"
                    value='login' οnclick="login()" />
            </form>
        </div>
    </div>
    <div class="search-box">
        <input class="search-txt" type="text" placeholder="@LiJiayuan20044310">
        <a class="search-btn">
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" width="38.086px" height="38.086px" viewBox="0 0 38.086 38.086"
                style="enable-background:new 0 0 38.086 38.086;" xml:space="preserve">
                <path d="M28.451,14.074C28.451,6.313,22.138,0,14.378,0C6.618,0,0.305,6.313,0.305,14.074c0,7.761,6.312,14.072,14.072,14.072
            C22.138,28.146,28.451,21.834,28.451,14.074z M14.378,24.613c-5.812,0-10.539-4.729-10.539-10.539
            c0-5.812,4.729-10.541,10.539-10.541c5.812,0,10.54,4.729,10.54,10.541C24.918,19.886,20.189,24.613,14.378,24.613z M37.781,34.975
            l-3.111,3.111L23.857,27.275l3.111-3.111L37.781,34.975z" />
            </svg>
        </a>
    </div>
</body>

</html>