登录注册页面模板
在开发一个网站或应用程序时,登录和注册页面是用户访问的第一个界面,这些页面需要清晰、简洁,并为用户提供方便的注册和登录方式,下面是一个简单的登录注册页面模板,使用HTML和CSS编写。
<!DOCTYPE html> <html> <head> <title>登录注册页面模板</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } .container { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: 100px; } h2 { text-align: center; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-weight: bold; margin-bottom: 5px; } .form-group input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px; } .form-group input[type="submit"] { background-color: #4CAF50; color: #fff; cursor: pointer; } </style> </head> <body> <div class="container"> <h2>登录注册页面模板</h2> <form action="#" method="post"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" id="password" name="password" required> </div> <div class="form-group"> <label>记住我:</label> <input type="checkbox" id="remember" name="remember"> <label for="remember">记住我</label> </div> <div class="form-group"> <input type="submit" value="登录"> <input type="reset" value="重置"> </div> </form> </div> </body> </html>
这个模板包含了一个简单的登录表单和一个注册表单,用户可以输入用户名和密码进行登录,还可以选择是否记住密码,如果选择记住密码,浏览器会保存用户的登录信息,以便下次访问时自动登录,登录表单下方还提供了重置按钮,用于清除输入框中的内容。