HTML——登录、注册页面的跳转

最新推荐文章于 2025-02-09 17:20:57 发布

weixin_58811914

最新推荐文章于 2025-02-09 17:20:57 发布

阅读量5w

点赞数 85

本文链接：https://blog.csdn.net/weixin_58811914/article/details/117793576

版权

登录界面和注册界面如下所示：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(images/background.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
         
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
         
        #loginDiv {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(246, 250, 250, 0.6);
            box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4);
            border-radius: 300px;
        }
         
        #loginDiv:hover{  
           filter: grayscale(60%);
        }  

        input{
            text-align: center;
            border:none; 
            background-color: rgba(239, 248, 250, 0.1);
            border-bottom:1px solid rgb(80, 196, 241);
            width: 200px;
            
        }

        #L_login {
            border-color: cornsilk;
            background-color: rgba(59, 194, 248, 0.8);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }

        #L_register {
            border-color: cornsilk;
            background-color: rgba(59, 194, 248, 0.8);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>
 
<body>
    <div id="loginDiv">
        <form action="" id="form">
            <table>
                <h2 style="text-align: center; color: rgb(59, 194, 248);">立即登录</h2></br>
                <tr><td style="text-align: cente

最低0.47元/天解锁文章