大家好，又见面了，我是你们的朋友全栈君。
提要：本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现，包括两个页面的相互跳转，不包括对输入数据的处理，适合刚入门的新手小白。
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>
密 码:<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>
密 码:<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、总结:这两个页面很相似，涉及到的元素都差不多，不同的只是对页面的布局，很多地方的布局都可以进行修改得到你最满意的页面效果，也有很多元素的属性可以进一步设置，比如限制用户名和 密码的长度，加入背景图片等等，都非常简单，只要修改上面相应的一行代码即可 ，今天的分享就是这样啦~~
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/133135.html原文链接：https://javaforall.net
