HTML&CSS实现经典登录注册页面

￡神魔★判官ぃ 2022-05-08 06:40 406阅读 0赞

### **提要**：本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现，包括两个页面的相互跳转，不包括对输入数据的处理，适合刚入门的新手小白。 ###

1、首先看一下最后的实现效果：首先是一个登录界面，点击“立即注册”会跳转到第二张图片，也就是注册界面，点击注册界面的“请登录”又会跳转回到第一个登录界面。

![70][]

![70 1][]

2、下面看一下具体的代码实现（使用的开发工具是HBuilder，有非常强大的提示功能，推荐）

首先是登录界面，我命名为login.html（这在代码的跳转中有作用），有几个我认为比较重要的地方我直接用//来注释了，但是小伙伴复制粘贴的时候需要把注释去掉，因为HTML注释语法不是这样的：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            form  
            \{  
                width:100%;  
                height:700px;  
                 margin-top: 0px;  
                background:\#008B8B;  
            \}  
            div  
            \{  
                display:inline-block;  
                padding-top: 80px;  
                padding-right: 20px;  
                  
            \}  
            h2  
            \{  
                font-family: "微软雅黑";  
            font-size: 40px;  
                color:black;  
            \}  
            \#log  
            \{  
                color:blue;  
            \}  
        </style>  
    </head>  
    <body>  
        <form name="login">  
            <center>  
            <div>  
            <h2>  
                    Hedy西点店欢迎您！  
            </h2>  
            <p>  
                用户名:<input type="text"/>  
            </p>  
            <p>  
                密&emsp;码:<input type="password"/>     //注意：&emsp是全角空格符，占一个中文字的长度，加上可以保证用户名                                                                                         和密码对齐，小伙伴可以试着 先不加这个运行一下看一下结果   
            </p>  
            <p>  
                <input id=log type="submit" value="登录" />  
            </p>  
            <p>  
                还没有账号？<a href="register.html">立即注册</a>  
            </p>  
            </div>  
            </center>  
        </form>  
    </body>  
</html>

然后是注册页面，我把它命名为register.html

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            form  
            \{  
                width:100%;  
                height:700px;  
                 margin-top: 0px;  
                background:\#008B8B;  
            \}  
            div  
            \{  
                display:inline-block;  
                padding-top: 40px;  
                padding-left: 0px;  
                  
            \}  
            h2  
            \{  
                font-family: "微软雅黑";  
            font-size: 40px;  
                color:black;  
            \}  
            \#reg  
            \{  
                color:blue;  
            \}  
        </style>  
    </head>  
    <body>  
        <form>  
            <div>  
            <h3>  
            注册  
        </h3>  
        <p>  
                用户名:<input type="text"/>  
            </p>  
            <p>  
                密&emsp;码:<input type="password"/>  
            </p>  
            <p>  
                手机号:<input type="text"/>  
            </p>  
            <p>  
                <input id=reg type="submit" value="立即注册" />  
            </p>  
            <p>  
                已有账号？<a href="login.html">请登录</a>  
            </p>      
        </form>      
            </div>  
          
          
    </body>  
</html>

3、总结:这两个页面很相似，涉及到的元素都差不多，不同的只是对页面的布局，很多地方的布局都可以进行修改得到你最满意的页面效果，也有很多元素的属性可以进一步设置，比如限制用户名和 密码的长度，加入背景图片等等，都非常简单，只要修改上面相应的一行代码即可 ，今天的分享就是这样啦~~

[70]: /images/20220508/1afe8652d0d740a680e01ece6a732f31.png
[70 1]: /images/20220508/c1c88f93d0e341e3b1a651ea41326b6e.png