为大家提供一个登录注册的html代码，包含css样式代码，需要的朋友可以直接用，背景图片可根据自己的想法调换，本篇未提供背景图片。
登录页面展示
注册页面显示
html代码
登录页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登录</title><link rel="stylesheet" href="css/login.css"></head><style>body{background: url("img/logo.jpg");background-position: center;background-size: 100%;} </style><body><div class="主体区"><div class="登录框"><form action=""><h2>登录</h2><div><span>用户名</span><input type="text" class="text" placeholder="请输入用户名"></div><div><span>密码</span><input type="password" class="text" placeholder="请输入密码"></div><div><a href="index.html"><input type="button" class="提交" value="登录"></a></div><div><a href="logon.html" ><input type="button" class="提交" value="注册"></a></div><div><a href="index.html" ><input type="button" value="返回"></a></div></form></div></div></body></html>
注册页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>注册</title><link rel="stylesheet" href="css/logon.css"></head><style>body{background: url("img/logo.jpg");background-position: center;background-size: 100%;} </style><body><div class="主体区"><div class="注册框"><form action=""><h2>注册</h2><div><span>昵称</span><input type="text" class="text" placeholder="请输入昵称"></div><div><span>年龄</span><input type="text" class="text" placeholder="请输入年龄"></div><div><span class="sex">性别</span><input type="radio" name="sex">男<input type="radio" name="sex">女</div><div><span class="hobby">爱好</span><input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">打游戏</div><div><span>职业</span><input type="text" class="text" placeholder="请输入职业"></div><div><span>Email</span><input type="text" class="text" placeholder="请输入Email"></div><div><span>密码</span><input type="password" class="text" placeholder="请输入密码"></div><div><span>再次确认密码</span><input type="password" class="text" placeholder="请再次确认密码"></div><div><input type="button" class="提交" value="注册"></div><div><a href="login.html" ><input type="button" class="提交" value="返回登录"></a></div></form></div></div></body></html>
css样式
登录页面css
.主体区 {padding: 150px;display: flex;align-items: center;flex-direction: column;}.登录框 {width: 350px;height: 300px;padding-top: 50px;padding-bottom: 50px;border-radius: 10px;background-color: rgba(255,255,255,0.7);}form {height: 100%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;}h2 {font-size: 40px;}span {font-size: 20px;display: inline-block;width: 90px;text-align: left;}.提交 {width: 260px;height: 30px;background: rgba(77,132,226);color: white;border: none;}.text {width: 165px;height: 25px;padding-left: 10px;border-radius: 5px;border: none;}
注册页面css
.主体区 {padding: 30px;display: flex;align-items: center;flex-direction: column;}.注册框 {width: 360px;height: 500px;padding-top: 50px;padding-bottom: 50px;border-radius: 10px;background-color: rgba(255,255,255,0.7);}form {height: 100%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;}h2 {font-size: 20px;}span {display: inline-block;width: 120px;text-align: left;}.sex {width: 225px;}.hobby {width: 125px;}.提交 {width: 290px;height: 30px;background: rgba(77,132,226);color: white;border: none;}.text {width: 165px;height: 25px;padding-left: 10px;border-radius: 5px;border: none;}
