登录注册HTML页面代码「建议收藏」

全栈程序员站长

发布于 2022-06-29 09:05:32

7.4K0

发布于 2022-06-29 09:05:32

文章被收录于专栏：全栈程序员必看

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

一、注册

创建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>

打开login.html文件，效果如下：