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

大家好，又见面了，我是你们的朋友全栈君。

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

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

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

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>