提要本文论述了简单登录、注册页面如何通过HTML与css协同实现。 包括两页的相互跳转，不包括输入数据的处理。 寒冷的草丛适合刚入门的初学者。 1、先看看最后的实现效果吧。 首先是登录画面。 单击“立即注册”将跳至第二张图像，即注册画面。 点击登录画面的“请登录”后，又返回最初的登录画面。
2、看看具体的代码实现。 (使用的开发工具为HBuilder，有非常强的提示功能，推荐。 ）
首先是登录界面。 我把它命名为login.HTML。 这在代码跳转中很有用。 我有几个觉得重要的地方。 我直接用//评论了，合作伙伴复制&； 粘贴的时候需要去除注释。 因为html注释的语法不是这样：
！ 文档类型html
html
头戴
meta charset='UTF-8 '
title/title
style type='text/css '
表单
{
width:100%；
高：700 px；
margin-top: 0px；
后台： # 008 b8b；
}
div
{
display :在线区块；
padding-top: 80px；
padding-right: 20px；
}
h2
{
font-family : '微软雅虎'；
font-size: 40px；
color :黑色；
}
#日志
{
颜色：蓝色；
}
/style
/head
实体
form name='login '
中心区
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
/中心
/form
/body
/html
然后是注册页面。 我把它命名为register.html
！ 文档类型html
html
头戴
><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 rel="external nofollow" href="login.html">请登录</a>
</p>
</form>
</div>
</body>
</html>
3、总结:这两个页面很相似，涉及到的元素都差不多，不同的只是对页面的布局，很多地方的布局都可以进行修改得到你最满意的页面效果，也有很多元素的属性可以进一步设置，比如限制用户名和 密码的长度，加入背景图片等等，都非常简单，只要修改上面相应的一行代码即可 ，今天的分享就是这样啦~~