HTML&CSS实现经典登录注册页面 | 您所在的位置:网站首页 › 实现登录注册页面 › HTML&CSS实现经典登录注册页面 |
大家好,又见面了,我是你们的朋友全栈君。 提要:本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即注册”会跳转到第二张图片,也就是注册界面,点击注册界面的“请登录”又会跳转回到第一个登录界面。 ![]() ![]() 2、下面看一下具体的代码实现(使用的开发工具是HBuilder,有非常强大的提示功能,推荐) 首先是登录界面,我命名为login.html(这在代码的跳转中有作用),有几个我认为比较重要的地方我直接用//来注释了,但是小伙伴复制粘贴的时候需要把注释去掉,因为HTML注释语法不是这样的: 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; } Hedy西点店欢迎您! 用户名: 密 码: //注意:&emsp是全角空格符,占一个中文字的长度,加上可以保证用户名 和密码对齐,小伙伴可以试着 先不加这个运行一下看一下结果
还没有账号?立即注册 然后是注册页面,我把它命名为register.html 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; } 注册 用户名: 密 码: 手机号:
已有账号?请登录 3、总结:这两个页面很相似,涉及到的元素都差不多,不同的只是对页面的布局,很多地方的布局都可以进行修改得到你最满意的页面效果,也有很多元素的属性可以进一步设置,比如限制用户名和 密码的长度,加入背景图片等等,都非常简单,只要修改上面相应的一行代码即可 ,今天的分享就是这样啦~~ 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/133135.html原文链接:https://javaforall.cn |
CopyRight 2018-2019 实验室设备网 版权所有 |