【html+css】html登录注册页面_登录注册页面代码

作者：不正经 | 2024-04-15 14:43:27

踩

登录注册页面代码

为大家提供一个登录注册的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;
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/428420