【html+css】html登录注册页面
为大家提供一个登录注册的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;
}
糯米小小: 注册怎么点不了
gjh_1234: 怎么搞 的啊 不太懂
--Hierarch--: 太酷了,老师太神了,我终于通过您的流程了解了css样式是怎么从外部接上的了wwwwww!!!!!!!!!!!!!!!!!!!!!!!!!!!感动!!!!!!!!!!!!!!老师yyds!!!!!!
ugcuctcfuctu: 对啊,怎么报错
2201_75695697: 登录界面的返回按钮怎么设置跟登录按钮一样大