一、HTML做一个登录注册页面简约
简约风格一直是大家喜欢的设计风格，下面我们就从简约风格角度来看HTML如何编写登录注册页面。
一个简约的登录注册页面不需要复杂的线条和花哨的背景，只需要简单的布局即可。使用CSS样式实现按钮的特效，让整个页面看起来更加美观。
<html> <head> <title>简约登录注册页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-box"> <h2>登录</h2> <form> <div class="user-box"> <input type="text" name="username" required=""> <label>用户名</label> </div> <div class="user-box"> <input type="password" name="password" required=""> <label>密码</label> </div> <input type="submit" value="登录"> <a href="#">忘记密码?</a> <a href="#">还没有账号?</a> </form> </div> </body> </html>
二、HTML做一个登录注册页面加边框
如果你觉得简约风格太过简单，那么你可以考虑给页面加上边框，让整个页面看起来更加有框架感，下面我们就详细看看如何实现。
在CSS中给页面加上边框非常简单，使用border属性即可，具体的边框样式可以根据个人喜好自行调整。
<html> <head> <title>带边框的登录注册页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="border-box"> <div class="login-box"> <h2>登录</h2> <form> <div class="user-box"> <input type="text" name="username" required=""> <label>用户名</label> </div> <div class="user-box"> <input type="password" name="password" required=""> <label>密码</label> </div> <input type="submit" value="登录"> <a href="#">忘记密码?</a> <a href="#">还没有账号?</a> </form> </div> </div> </body> </html>
三、HTML做一个登录注册页面前端
前端是页面的重要组成部分，好的前端可以让用户更好地理解页面的功能和操作，下面我们就从前端的角度详细说一下如何编写登录注册页面。
首先，我们需要一个布局框架来实现具体的HTML代码。当然，Bootstrap是一个非常好用的前端框架，用来实现登录注册页面非常不错，使用Bootstrap可以轻易地实现手机端和电脑端的适配。
<html> <head> <title>前端登录注册页面</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <h2>登录</h2> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password"> </div> <button type="submit" class="btn btn-default">登录</button> <a href="#">忘记密码?</a> <a href="#">还没有账号?</a> </form> </div> <div class="col-md-6"> <h2>注册</h2> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password"> </div> <div class="form-group"> <label for="confirm">确认密码</label> <input type="password" class="form-control" id="confirm"> </div> <button type="submit" class="btn btn-default">注册</button> </form> </div> </div> </div> </body> </html>
四、HTML制作注册登录页面
制作注册登录页面需要考虑到页面的兼容性和布局效果，下面我们就详细讲解如何制作注册登录页面。
首先，我们需要一个容器来放置两个登录和注册框架，使用div元素即可。在其中加入一个登录框和一个注册框，使用form元素和input元素，表单元素可以更好地取得用户的输入数据并进行后续操作。
<html> <head> <title>登录注册页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-register"> <div class="login"> <h2>登录</h2> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password"> </div> <button type="submit" class="btn btn-default">登录</button> <a href="#">忘记密码?</a> <a href="#">还没有账号?</a> </form> </div> <div class="register"> <h2>注册</h2> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password"> </div> <div class="form-group"> <label for="confirm">确认密码</label> <input type="password" class="form-control" id="confirm"> </div> <button type="submit" class="btn btn-default">注册</button> </form> </div> </div> </body> </html>
五、HTML登录注册页面跳转
登录注册页面跳转是登录注册页面必须要有的功能，下面我们详细讲解如何实现跳转功能。
首先，在登录和注册按钮中加入一个跳转链接，使用a元素即可。在跳转链接中添加目标要跳转的页面，比如我们想跳转到主页，那么我们可以使用相对路径或绝对路径来实现跳转。
<html> <head> <title>登录注册页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-register"> <div class="login"> <h2>登录</h2> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password"> </div> <button type="submit" class="btn btn-default">登录</button> <a href="index.html">忘记密码?</a> <a href="register.html">还没有账号?</a> </form> </div> <div class="register"> <h2>注册</h2> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password"> </div> <div class="form-group"> <label for="confirm">确认密码</label> <input type="password" class="form-control" id="confirm"> </div> <button type="submit" class="btn btn-default">注册</button> <a href="login.html">已有账号?</a> </form> </div> </div> </body> </html>
六、HTML编写一个注册页面
注册页面同样也是一种重要的页面，下面我们来看看如何编写一个注册页面。
注册页面需要收集用户的信息，这样我们可以给用户提供更好的服务。在页面中加入表单元素，让用户输入具体的信息，并使用input元素的required属性，确保用户必须填写具体的信息才能注册成功。
<html>
<head>
<title>注册页面</title>
<link rel="stylesheet" href="style.css">
<原创文章，作者：QWXLQ，如若转载，请注明出处：https://www.506064.com/n/372816.html
微信扫一扫 
支付宝扫一扫 