用表单做账号登陆与注册的网页练习，可以简单的进行注册界面与登陆界面的来回跳转。
登录页面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
</head>
<body <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body background="https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg">
<div
style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 480px; height: 680px;background-color: rgb(255, 255, 255);padding-left: 50px;padding-top: 35px; border-radius: 12px;">
<form action="#" method="post"></form>
<span style="font-size: 40px;"><b>欢迎注册</b></span><br/>
<span style="font-size: 10px;">已有账号？ <a href="login.html" style="text-decoration: none;">登录</a></span><br/>
<hr style="margin-bottom: 20px;" color="white">
用户名<input type="text" placeholder="请设置用户名"
style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;width: 370px;height: 50px;border-radius: 3px;border: 1px solid #b8b8b8;"><br />
手机号<input type="text" placeholder="可用于登录和找回密码"
style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;width: 370px;height: 50px;border-radius: 3px;border: 1px solid #b8b8b8;"><br />
密 码<input type="password" placeholder="请设置登录密码"
style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;width: 370px;height: 50px;border-radius: 3px;border: 1px solid #b8b8b8;"><br />
验证码<input type="text" placeholder="请输入验证码"
style="margin-top: 20px;margin-left: 10px;width: 200px;height: 50px;border-radius: 3px;border: 1px solid #b8b8b8;">
<input type="button" value="获取验证码" style="margin-left: 10px;width: 155px;height: 50px;border-radius: 3px;"><br />
<input type="button" value="注册"
style="margin-top: 40px;width: 440px;height: 50px;background-color:#748ced;border-radius: 24px;"><br />
<hr style="margin-bottom: 1px;" color="white">
<span style="font-size: 10px;margin-left: 25%;margin-right: 25%;"><input type="checkbox" name="接受">阅读并接受 <a style="text-decoration: none;" href="#">百度用户协议</a> 和
<a style="text-decoration: none;" href="#">隐私政策</a></span>
</form>
</div>
</body>
</html>>
<div style="position: absolute;width: 407px; height: 427px;">
<div
style="position: absolutewidth 407px; ">
<form action="#" method="post"></form>
<h3>账号登录</h3>
<hr style="margin-bottom: 20px;" align="left" width="80px" size="3px" color="blue">
<input type="text" placeholder="手机号/用户/名邮箱"
style="margin-top: 20px;width: 370px;height: 50px;border-radius: 8px;border: 1px solid #b8b8b8;"><br />
<input type="password" placeholder="密码"
style="margin-top: 20px;margin-bottom: 20px;width: 370px;height: 50px;border-radius: 8px;border: 1px solid #b8b8b8;"><br />
<a style="float: right; margin-right: 30px;font-size: 15px;text-decoration: none;" href="#">忘记密码？</a><br />
<input type="button" value="登录"
style="margin-top: 20px;width: 380px;height: 50px;background-color:#4e6ef2;border-radius: 8px;"><br />
<p style="margin-top: 10px;margin-left: 10%;margin-right: 10%;">阅读并接受 <a style="text-decoration: none;" href="#">百度用户协议</a> 和
<a style="text-decoration: none;" href="#">隐私政策</a></p>
</form>
</div>
<div
style="position: absolute;top: 378px;;margin: auto;width: 427px; height: 50px;background-color: rgb();">
<hr size="1px" color="#b8b8b8">
<a style="float: right;margin-right: 10px;font-size: 15px;text-decoration: none;"
href="register.html">立即注册</a>
</div>
</div>
</body>
</html>注册页面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body background="https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg">
<div
style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 480px; height: 680px;background-color: rgb(255, 255, 255);padding-left: 50px;padding-top: 35px; border-radius: 12px;">
<form action="#" method="post"></form>
<span style="font-size: 40px;"><b>欢迎注册</b></span><br/>
<span style="font-size: 10px;">已有账号？ <a href="login.html" style="text-decoration: none;">登录</a></span><br/>
<hr style="margin-bottom: 20px;" color="white">
用户名<input type="text" placeholder="请设置用户名"
style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;width: 370px;height: 50px;border-radius: 3px;border: 1px solid #b8b8b8;"><br />
手机号<input type="text" placeholder="可用于登录和找回密码"
style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;width: 370px;height: 50px;border-radius: 3px;border: 1px solid #b8b8b8;"><br />
密 码<input type="password" placeholder="请设置登录密码"
style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;width: 370px;height: 50px;border-radius: 3px;border: 1px solid #b8b8b8;"><br />
验证码<input type="text" placeholder="请输入验证码"
style="margin-top: 20px;margin-left: 10px;width: 200px;height: 50px;border-radius: 3px;border: 1px solid #b8b8b8;">
<input type="button" value="获取验证码" style="margin-left: 10px;width: 155px;height: 50px;border-radius: 3px;"><br />
<input type="button" value="注册"
style="margin-top: 40px;width: 440px;height: 50px;background-color:#748ced;border-radius: 24px;"><br />
<hr style="margin-bottom: 1px;" color="white">
<span style="font-size: 10px;margin-left: 25%;margin-right: 25%;"><input type="checkbox" name="接受">阅读并接受 <a style="text-decoration: none;" href="#">百度用户协议</a> 和
<a style="text-decoration: none;" href="#">隐私政策</a></span>
</form>
</div>
</body>
</html>
4810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
