[代码实例][HTML][Bootstrap]仿QQ登录界面

最新推荐文章于 2024-05-26 13:30:44 发布

cloudblaze

最新推荐文章于 2024-05-26 13:30:44 发布

阅读量2.9k

点赞数 4

分类专栏：代码实例

本文链接：https://blog.csdn.net/cloudblaze/article/details/108683095

版权

代码实例专栏收录该内容

33 篇文章 0 订阅

订阅专栏

仿QQ登录界面

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Bootstrap Demo 5</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

	<script type="text/javascript" src="Js/jquery-3.5.1.min.js"></script>

	<%-- css:Bootstrap --%>
	<link rel="stylesheet" href="Lib/bootstrap-4.5.2/css/bootstrap.min.css" />

	<style type="text/css">
		/* 登录界面外边框 */
		div.QQlogin {
			margin: 20px auto;
			width: 430px;
			height: 333px;
			box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		}

			/* 登录表单上的图片 */
			div.QQlogin aside {
				width: 100%;
				height: 180px;
				background-image: url("Image/QQLogin.jpg");
			}

		div.down {
			position: relative;
			height: 153px;
			background-color: #EBF2F9;
			margin-left: 0;
			margin-right: 0;
		}

			div.down div.touxiang {
				height: 100%;
			}

				div.down div.touxiang > a {
					width: 81px;
					height: 81px;
					display: inline-block;
					background: url("Image/touxiang.jpg") no-repeat;
					background-size: contain;
					margin-top: 20px;
					margin-left: 30px;
				}

				div.down div.touxiang dl {
					position: absolute;
					left: 100%;
					top: 53%;
				}

					/* 定义图像右下角小图标 */
					div.down div.touxiang dl span {
						width: 14px;
						height: 14px;
						display: inline-block;
						background-image: url("Image/Right.png");
						background-size: contain;
						background-repeat: no-repeat;
					}

				/* 定义左下角切换用户 */
				div.down div.touxiang i.people {
					width: 35px;
					height: 35px;
					left: 10px;
					top: 75%;
					position: absolute;
					background: url("Image/User_Add.png") no-repeat;
					background-size: contain;
				}

		div.login-box {
			margin-top: 15px;
			margin-left: 20px;
		}

			div.login-box input {
				height: 30px;
				width: 195px;
				border: 1px solid #d1d1d1;
				padding-left: 10px;
				color: #7e7e7e;
			}

			div.login-box span.first {
				display: inline-block;
				position: absolute;
				width: 20px;
				height: 20px;
				background: url("Image/arrow_triangle_down.png") no-repeat;
				background-size: contain;
				margin-left: 172px;
				top: 8px;
			}

			div.login-box span.second {
				display: inline-block;
				position: absolute;
				width: 20px;
				height: 20px;
				background: url("Image/key_lock_open_password_unlock.net.png") no-repeat;
				background-size: contain;
				margin-left: 168px;
				top: 34px;
			}

			div.login-box label {
				font-size: 12px;
				color: #656565;
				text-indent: 15px;
				margin-top: 10px;
				display: inline-block;
			}

				div.login-box label.auto-login {
					margin-left: 48px;
				}

			div.login-box input.three {
				width: 16px;
				height: 16px;
				margin-top: 1px;
				position: absolute;
				margin-left: -15px;
			}

			div.login-box input.four {
				width: 16px;
				height: 16px;
				margin-top: 1px;
				position: absolute;
				margin-left: -15px;
			}

			div.login-box button {
				display: block;
				width: 195px;
				height: 30px;
				background-color: #16a8de;
				color: #fff;
				border-radius: 5px;
				font-size: 14px;
				font-weight: 600;
			}

		div.register {
			position: absolute;
			margin-top: 22px;
			margin-left: 335px;
		}

			div.register a {
				color: #2685e3;
				display: block;
				width: 60px;
				font-size: 13px;
				font-family: "微软雅黑";
			}

				div.register a.find-password {
					margin-top: 13px;
				}
	</style>
</head>
<body>

	<div class="QQlogin">
		<aside></aside>
		<div class="row down">
			<div class="col-3 touxiang">
				<a href="#"></a>
				<dl>
					<dt><a href="#"><span class="online"></span></a></dt>
					<dd></dd>
				</dl>
				<i class="people"></i>
			</div>

			<div class="col-6 login-box">
				<input type="text" placeholder="QQ号码/手机/邮箱" /><span class="first"></span>
				<input type="password" placeholder="密码" /><span class="second"></span>
				<label>
					<input type="checkbox" class="three" />&nbsp;记住密码</label>
				<label class="auto-login">
					<input type="checkbox" class="four" />&nbsp;自动登录</label>
				<button class="btn">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
			</div>

			<div class="col-3 register">
				<a href="#">注册内容</a>
				<a href="#" class="find-password">找回密码</a>
			</div>
		</div>
	</div>

	<%-- js:Bootstrap --%>
	<script type="text/javascript" src="Js/popper.min.js"></script>
	<script type="text/javascript" src="Lib/bootstrap-4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

cloudblaze

关注

4
点赞
踩
29

收藏

觉得还不错? 一键收藏
1
评论
[代码实例][HTML][Bootstrap]仿QQ登录界面

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap Demo 5</title> <meta name="viewport" conte.
复制链接

扫一扫

专栏目录