登录注册HTML页面代码

一、注册创建register.html文件，录入如下代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">form{width:100%;

zhaocs2019

82510人浏览 · 2021-01-06 17:29:23

zhaocs2019 · 2021-01-06 17:29:23 发布

一、注册

创建register.html文件，录入如下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            form
            { 
                width:100%;
                height:100%;
                margin-top: 100px;
				margin-bottom: 100px;
                background:#008B8B;
            }
            div
            {
                display:inline-block;
                padding-top: 255px;
                padding-bottom: 255px;
				padding-left: 1px;
				padding-right: 1px;
            }
            h2
            {
                font-family: "微软雅黑";
            font-size: 40px;
                color:black;
            }
            #log
            {
                color:blue;
            }
        </style>
    </head>
    <body>
        <form>
		    <center>
            <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>   
            </div>
            </center>			
        </form>      
    </body>
</html>

打开register.html文件，效果如下：
在这里插入图片描述

二、登录

创建login.html文件，录入如下代码

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            form
            { 
                width:100%;
                height:100%;
                margin-top: 100px;
				margin-bottom: 100px;
                background:#008B8B;
            }
            div
            {
                display:inline-block;
                padding-top: 255px;
                padding-bottom: 255px;
				padding-left: 1px;
				padding-right: 1px;
            }
            h2
            {
                font-family: "微软雅黑";
            font-size: 40px;
                color:black;
            }
            #log
            {
                color:blue;
            }
        </style>
    </head>
    <body>
		<!--div class="div">
			<img src="favicon.png" width="100%" height="200px" alt=""  id="picture">
		</div-->
        <form name="login">
            <center>
            <div>
            <h2>
                登录
            </h2>
            <p>
                用户名：<input type="text"/>
            </p>
            <p>
                密&emsp;码：<input type="password"/>     
            </p>
            <p>
                <input id=log type="submit" value="立即登录" />
            </p>
			<p>
				没有账号？<a href="register.html">请注册</a>
			</p>   
            </div>
            </center>
        </form>
    </body>
</html>