【html+css】html登录注册页面

原创已于 2023-07-08 13:53:36 修改 · 2.5w 阅读

414 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端 #css

于 2023-07-08 10:57:04 首次发布

html 同时被 2 个专栏收录

6 篇文章

订阅专栏

css

1 篇文章

订阅专栏

这是一个包含登录和注册功能的HTML代码示例，使用了CSS进行样式设计，提供了背景图片的设置方法，用户可以自定义背景并输入用户名、密码等信息进行登录或注册操作。

该文章已生成可运行项目，

为大家提供一个登录注册的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(https://blog.csdn.net/"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(https://blog.csdn.net/"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;
}

本文章已经生成可运行项目