<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>login</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(images/m.jpg);
background-repeat: no-repeat;
}
.chrome {
position: absolute;
height: 34px;
font-size: 14px;
line-height: 34px;
background-color: rgba(150, 164, 224, .17);
color: #eaedf9;
padding: 0 11px;
top: 20px;
left: 20px;
z-index: 100;
}
#a {
color: #6bd3fe;
text-decoration: none;
}
.nav {
width: 100%;
padding-top: 200px;
}
.logo {
width: 240px;
margin: 0 auto;
}
.hlogo {
width: 240px;
height: 70px;
background: url(images/lenovo-learning.png) no-repeat center -42px;
background-size: 90%;
margin-top: 10px;
}
.logo p {
font-family: "\5FAE\8F6F\96C5\9ED1", "Hiragino Sans GB";
color: #FFFFFF;
text-align: center;
margin-top: -32px;
font-size: 16px;
opacity: 0.8;
}
/* 中间部分样式 */
.center {
padding-top: 200px;
}
/* 登录框样式 */
.user {
width: 388px;
height: 320px;
background-color: #f2f7fa;
margin: 0 auto;
padding-top: 4px;
line-height: 54px;
}
/* “账号登录”样式 */
.cuser {
text-align: center;
color: #606060;
font-weight: 500;
font-size: 17px;
margin-bottom: 40px;
}
/* 输入邮箱行 */
.form .user1 {
width: 320px;
height: 30px;
line-height: 30px;
margin: 0 auto;
margin-top: 10px;
border-bottom: 1px solid #e1e6e9;
overflow: hidden;
}
/* 输入密码行 */
.form .user2 {
width: 320px;
height: 30px;
line-height: 30px;
margin: 0 auto;
margin-top: 10px;
border-bottom: 1px solid #e1e6e9;
overflow: hidden;
}
/* 小图标样式 */
.form div img {
width: 15px;
}
/* 输入框样式 */
.form div input {
width: 288px;
border: none;
height: 27px;
line-height: 27px;
text-indent: 5px;
margin-top: -7px;
background-color: #f2f7fa;
}
/* 登录按钮样式 */
.form div button {
width: 320px;
height: 36px;
line-height: 30px;
text-align: center;
background-color: #49c0e0;
border-radius: 5px;
margin: 0 auto;
display: block;
margin-top: 60px;
border: 1px solid #49c0e0;
color: #feffff;
letter-spacing: 1px;
}
/* 找回密码行 */
.mima {
text-indent: 37px;
font-size: 12px;
color: #909090;
line-height: 20px;
}
.js .box {
font-size: 12px;
color: #000000;
border: 1px solid #006600;
background-color: #DBFBF7;
}
.jz {
display: block;
float: left;
font-size: 12px;
line-height: 20px;
}
/* 找回密码 */
.wj {
display: block;
float: right;
text-indent: 37px;
font-size: 12px;
color: #909090;
line-height: 20px;
margin-right: 40px;
}
/* l立即找回 */
.wj a {
text-decoration: none;
}
/* 底部部分 */
.foot {
height: 30px;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 1px;
padding-top: 15px;
}
/* 底部所有p标签 */
.foot p {
text-align: center;
line-height: 2.2;
color: white;
font-size: 12px;
font-family: "iconfont";
}
/* 联系我们样式 */
.foot p a {
margin: 0 43px;
color: #bebfd1;
font-size: 13px;
}
/* 联系部分 */
.call {
text-align: center;
line-height: 2.2;
color: #9196b3;
font-size: 12px;
font-family: "iconfont";
}
</style>
</head>
<body>
<div>
<div>
<!-- 左上角部分 -->
<div class="chrome">
<span>欢迎</span>
<span>使用</span>
</div>
</div>
<!-- 中间部分 -->
<div class="center">
<!-- 登陆框 -->
<div class="user">
<p class="cuser">账号登录</p>
<!-- 用户名密码及登录按钮部分 -->
<div class="form">
<div class="user1">
<img src="images/user.png" alt="">
<input type="text" placeholder="邮箱">
</div>
<div class="user2">
<img src="images/passwd.png" alt="">
<input type="password" placeholder="密码">
</div>
<div>
<button type="button">马上登录</button>
</div>
</div>
<div style="height: 25px;"></div>
<div class="mima">
<p class="jz">
<input type="checkbox" class="box">
<span>记住密码</span>
</p>
<p class="wj">忘记密码?
<a href="#">立即找回</a>
</p>
</div>
</div>
</div>
<!-- 底部部分 -->
<div class="foot">
<p class="banquan">
2020年5月10日
</p>
</div>
</div>
</div>
</body>
</html>
第二个简单的登录界面
5星 · 超过95%的资源 需积分: 47 25 浏览量
2020-05-10
16:06:09
上传
评论
收藏 1.15MB ZIP 举报 
LLS-login01-master.zip （16个子文件） 
LLS-login01-master images 
user.png 5KB tag.png 182KB
tag01.jpg 118KB back03.png 6KB back02.png 10KB back04.png 31KB lenovo-learning.png 6KB ditu.jpg 74KB m.jpg 631KB touxiang.jpg 41KB 06denglu.jpg 94KB passwd.png 4KB logo.png 20KB download.png 25KB lenovo.png 7KB
login.html 7KB资源评论
郑华滨2023-07-24这个登录界面简洁实用，操作方便。
湯姆漢克2023-07-24登录界面的功能齐全，满足日常登录需求。
嘻嘻哒的小兔子2023-07-24代码结构清晰，易于修改和维护。
网络小精灵2023-07-24这个登录界面很容易集成到现有的系统中，提高了用户的登录体验。
莫少儒2023-07-24界面设计清晰，用户界面友好，容易上手。
