admin管理员组文章数量:1656605
<!DOCTYPE html>
<html xmlns="http://www.w3/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.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" /> 记住密码</label>
<label class="auto-login">
<input type="checkbox" class="four" /> 自动登录</label>
<button class="btn">登 录</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>
版权声明:本文标题:[代码实例][HTML][Bootstrap]仿QQ登录界面 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729740491a1211662.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论