登录注册页面

需求

开发一个可以点击登录和注册的网页

参考代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎使用</title>
    <style>
        body {
            /* 修改背景 */
            background: url(https://www.loliapi.com/acg/);
            /* 背景图 */
            background-position: center 0;
            /* 背景水平居中，后面的0表示上下不动 */
            background-repeat: no-repeat;
            /* 背景图不要重复 */
            background-size: cover;
            /* 背景图大小自动铺满屏幕 */
        }

        #login_btn {
            color: white;
            background: linear-gradient(90deg, red, green, blue, white, orange, yellow);
            /* 生成渐变色 */
            background-size: 400%;
            /* 背景放大 */
            border: none;
            /* 边框2px宽，实线，橙色 */
            border-radius: 10px;
            /* 边角圆度10px */
            padding: 10px 20px;
            /* 内边距，可以看到背景被撑大 */
            text-shadow: 1px 1px 2px black;
            /* 文字的阴影效果，上下1px 左右1px 模糊程度2px 颜色gold */
            transition: 0.5s;
            animation: move infinite linear 8s;
        }

        #login_btn:hover {
            animation: zhuan infinite linear 2s;
            box-shadow: 0px 0px 20px white;
            cursor: pointer;
            padding: 25px 40px;
            font-size: 28px;
            backdrop-filter: blur(2px);
        }

        @keyframes move {
            0% {
                background-position: 0px;
            }

            100% {
                background-position: -400%;
            }
        }

        @keyframes zhuan {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
                background-position: -400%;
            }
        }

        .input_text {
            background: none;
            /* 去除背景 */
            border: 2px solid orange;
            padding: 15px 20px;
            margin: 10px auto;
            /* 外边距，上下10px，左右居中自动调整 */
            width: 180px;
            /* 宽度 */
            text-align: center;
            /* 文字居中 */
            outline: none;
            /* 外部的线，只有文本框被选择的时候出现 */
            color: white;
            font-size: 22px;
            /* 字体大小 */
            display: block;
            /* block显示模式，是一个占据一整行，inline是不占据一整行 */
            border-radius: 10px;
            transition: 0.5s;
            /* 当属性值发生变化的时候，需要经历的时间 */
        }

        .input_text:focus {
            width: 220px;
            border-radius: 30px;
            border-color: blue;
        }

        .input_text::placeholder {
            color: white;
        }

        .box {
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            /* 绝对定位，基于浏览器窗口定位 */
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* 基于元素本身的大小，往左上移动50% */
            border: none;
            color: aliceblue;
            text-align: center;
            padding: 10px 50px;
            border-radius: 20px;
            width: 280px;
        }
    </style>
</head>

<body>
    <div class="box">
        <form action="" method="post">
            <h1>欢迎登录</h1>
            <input class="input_text" name="username" type="text" placeholder="用户名">
            <!-- placeholder属性用于文本框的提示 -->
            <input class="input_text" name="password" type="password" placeholder="密码">
            <input id="login_btn" name="login" type="submit" value="登录">
            <input id="login_btn" type="button" onclick="window.location.href='register.html'" value="注册">
        </form>

    </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎使用</title>
    <style>
        body {
            /* 修改背景 */
            background: url(https://www.loliapi.com/acg/);
            /* 背景图 */
            background-position: center 0;
            /* 背景水平居中，后面的0表示上下不动 */
            background-repeat: no-repeat;
            /* 背景图不要重复 */
            background-size: cover;
            /* 背景图大小自动铺满屏幕 */
        }

        #login_btn {
            color: white;
            background: linear-gradient(90deg, red, green, blue, white, orange, yellow);
            /* 生成渐变色 */
            background-size: 400%;
            /* 背景放大 */
            border: none;
            /* 边框2px宽，实线，橙色 */
            border-radius: 10px;
            /* 边角圆度10px */
            padding: 10px 20px;
            /* 内边距，可以看到背景被撑大 */
            text-shadow: 1px 1px 2px black;
            /* 文字的阴影效果，上下1px 左右1px 模糊程度2px 颜色gold */
            transition: 0.5s;
            animation: move infinite linear 8s;
        }

        #login_btn:hover {
            animation: zhuan infinite linear 2s;
            box-shadow: 0px 0px 20px white;
            cursor: pointer;
            padding: 25px 40px;
            font-size: 28px;
            backdrop-filter: blur(2px);
        }

        @keyframes move {
            0% {
                background-position: 0px;
            }

            100% {
                background-position: -400%;
            }
        }

        @keyframes zhuan {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
                background-position: -400%;
            }
        }

        .input_text {
            background: none;
            /* 去除背景 */
            border: 2px solid orange;
            padding: 15px 20px;
            margin: 10px auto;
            /* 外边距，上下10px，左右居中自动调整 */
            width: 180px;
            /* 宽度 */
            text-align: center;
            /* 文字居中 */
            outline: none;
            /* 外部的线，只有文本框被选择的时候出现 */
            color: white;
            font-size: 22px;
            /* 字体大小 */
            display: block;
            /* block显示模式，是一个占据一整行，inline是不占据一整行 */
            border-radius: 10px;
            transition: 0.5s;
            /* 当属性值发生变化的时候，需要经历的时间 */
        }

        .input_text:focus {
            width: 220px;
            border-radius: 30px;
            border-color: blue;
        }

        .input_text::placeholder {
            color: white;
        }

        .box {
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            /* 绝对定位，基于浏览器窗口定位 */
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* 基于元素本身的大小，往左上移动50% */
            border: none;
            color: aliceblue;
            text-align: center;
            padding: 10px 50px;
            border-radius: 20px;
            width: 280px;
        }
    </style>
</head>

<body>
    <div class="box">
        <form action="" method="post">
            <h1>欢迎注册</h1>
            <input class="input_text" name="username" type="text" placeholder="用户名">
            <!-- placeholder属性用于文本框的提示 -->
            <input class="input_text" name="password" type="text" placeholder="密码">
            <input class="input_text" name="confirmPassword" type="text" placeholder="确认密码">
            <input id="login_btn" name="register" type="submit" value="注册">
            <input id="login_btn" type="button" onclick="window.location.href='login.html'" value="登录">
        </form>

    </div>
</body>

</html>

效果展示

作业13.1提交的内容

理解程序的运行逻辑

程序运行成功的截图，单独发送给组长

8.6 KiB Raw Blame History Unescape Escape

登录注册页面

需求

参考代码

8.6 KiB

Raw Blame History