注册登录页面切换响应

最新推荐文章于 2024-01-24 23:43:38 发布

就想糊糊涂涂

最新推荐文章于 2024-01-24 23:43:38 发布

阅读量744

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/qq_45626944/article/details/110183626

版权

前端基础专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.注册页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>用户登录界面</title>
    <base target="_blank" />
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        a {
            color: #FFF;
        }
        
        body {
            font-family: Arial, Helvetica, sans-serif;
            background: blueviolet;
            font-size: 13px;
        }
        
        img {
            border: 0;
        }
        
        .lg {
            width: 468px;
            height: 468px;
            margin: 100px auto;
            background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/login_bg.png) no-repeat;
        }
        
        .lg_top {
            height: 200px;
            width: 468px;
        }
        
        .lg_main {
            width: 400px;
            height: 180px;
            margin: 0 25px;
        }
        
        .lg_m_1 {
            width: 290px;
            height: 100px;
            padding: 60px 55px 20px 55px;
        }
        
        .ur {
            height: 37px;
            border: 2;
            color: #666;
            width: 236px;
            margin: 4px 28px;
            background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/user.png) no-repeat;
            padding-left: 10px;
            font-size: 16pt;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        .pw {
            height: 37px;
            border: 2;
            color: #666;
            width: 236px;
            margin: 4px 28px;
            background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
            padding-left: 10px;
            font-size: 16pt;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        .bn {
            width: 336px;
            height: 50px;
            background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
            border: 2;
            display: block;
            font-size: 18px;
            color: #FFF;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bolder;
        }
        
        .lg_foot {
            height: 80px;
            width: 330px;
            padding: 100px 20px 0 68px;
        }
        
        h1 {
            text-align: center;
            color: #FFF;
            font-size: 60px;
        }
    </style>
</head>

<body class="b">
    <div class="lg">
        <h1>Register</h1>
        <form action="#" method="POST">
            <div class="lg_top"></div>
            <div class="lg_main">
                <div class="lg_m_1">

                    <input name="username" placeholder="请输入用户名" class="ur" />
                    <input name="password" type="password" placeholder="请输入密码" class="pw" />
                    <input name="password" type="password" placeholder="确认密码" class="pw" />

                </div>
            </div>
            <div class="lg_foot">
                <input type="button" value="注册" onclick="registered()" class="bn" /></div>
        </form>
    </div>
    <div style="text-align:center;">
    </div>
    <script>
        function registered() {
            window.open("registered.html");
        }
    </script>
</body>

</html>

2.注册成功：

<!DOCTYPE html>
<html>

<head>
    <title>登录成功</title>
</head>
<style>
    body {
        background-color: blueviolet;
    }
    
    h1 {
        text-align: center;
        font-size: 60px;
        color: aliceblue;
    }
    
    h2 {
        text-align: center;
        font-size: 40px;
        color: aliceblue;
    }
    
    input {
        background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
        height: 50px;
        width: 300px;
        font-size: 35px;
        color: aliceblue;
    }
    
    .bu {
        padding: 50px 168px 0 618px;
    }
</style>

<body>

    <h1>注册成功</h1>
    <h2>欢迎注册糊涂TV</h2>
    <div class="bu">
        <input type="button" value="点击进入登录界面" onclick="enter()"></input>
    </div>
    <script>
        function enter() {
            window.open("enter.html");
        }
    </script>
</body>

</html>

注册成功

3.登录页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>用户登录界面</title>
    <base target="_blank" />
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        a {
            color: #FFF;
        }
        
        body {
            font-family: Arial, Helvetica, sans-serif;
            background: blueviolet;
            font-size: 13px;
        }
        
        img {
            border: 0;
        }
        
        .lg {
            width: 468px;
            height: 468px;
            margin: 100px auto;
            background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/login_bg.png) no-repeat;
        }
        
        .lg_top {
            height: 200px;
            width: 468px;
        }
        
        .lg_main {
            width: 400px;
            height: 180px;
            margin: 0 25px;
        }
        
        .lg_m_1 {
            width: 290px;
            height: 100px;
            padding: 60px 55px 20px 55px;
        }
        
        .ur {
            height: 37px;
            border: 2;
            color: #666;
            width: 236px;
            margin: 4px 28px;
            background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/user.png) no-repeat;
            padding-left: 10px;
            font-size: 16pt;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        .pw {
            height: 37px;
            border: 2;
            color: #666;
            width: 236px;
            margin: 4px 28px;
            background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
            padding-left: 10px;
            font-size: 16pt;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        .bn {
            width: 336px;
            height: 50px;
            background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
            border: 2;
            display: block;
            font-size: 18px;
            color: #FFF;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bolder;
        }
        
        .lg_foot {
            height: 80px;
            width: 330px;
            padding: 6px 68px 0 68px;
        }
        
        h1 {
            text-align: center;
            color: #FFF;
            font-size: 60px;
        }
    </style>
</head>

<body class="b">
    <div class="lg">
        <h1>Login</h1>
        <form action="#" method="POST">
            <div class="lg_top"></div>
            <div class="lg_main">
                <div class="lg_m_1">

                    <input name="username" placeholder="user" class="ur" />
                    <input name="password" type="password" placeholder="wjl" class="pw" />

                </div>
            </div>
            <div class="lg_foot">
                <input type="button" value="登录" onclick="entered()" class="bn" /></div>
        </form>
    </div>
    <div style="text-align:center;">
    </div>
    <script>
        function entered() {
            window.open("entered.html");
        }
    </script>
</body>

</html>

4.登录成功

<!DOCTYPE html>
<html>

<head>
    <title>登录成功</title>
</head>
<style>
    body {
        background-color: blueviolet;
    }
    
    h1 {
        text-align: center;
        font-size: 60px;
        color: aliceblue;
    }
    
    h2 {
        text-align: center;
        font-size: 40px;
        color: aliceblue;
    }
    
    input {
        background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
        height: 50px;
        width: 200px;
        font-size: 35px;
        color: aliceblue;
    }
    
    .bu {
        padding: 50px 168px 0 648px;
    }
</style>

<body>

    <h1>登录成功</h1>
    <h2>欢迎登录糊涂TV</h2>
    <div class="bu">
        <input type="button" value="点击进主页" onclick="video1()"></input>
    </div>
    <script>
        function video1() {
            window.open("video1.html");
        }
    </script>
</body>

</html>

登录成功
其中利用了button中的onclick属性进行点击发生事件响应：
例：

<input type="button" value="点击进主页" onclick="video1()">

利用JavaScript函数进行响应：

<script>
        function video1() {
            window.open("video1.html");
        }
    </script>

就想糊糊涂涂

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
注册登录页面切换响应

1.注册页面：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>用户登录界面</title> <base target="_blank" /> <style> * { padding: 0px
复制链接

扫一扫

专栏目录