index.html
<!-- index-html是网站的首页对应的html文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>京东-欢迎登录</title>
<!-- 设置网页图标 -->
<link rel="icon" type="image/ico" href="img/yyy.png">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- ===============顶部=============== -->
<div id="header">
<!-- 顶部的顶部 -->
<div id="top">
<div>
<a href="https://www.jd.com/"><img src="img/logo.png"/></a>
<img src="img/l-icon.png"/>
</div>
<a id="surver" target="_blank" href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">登录页面, 调查问卷</a>
</div>
<!-- 顶部的底部 -->
<div id="bottom">
<p><img src="img/warning.png"/>   依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a target="_black" href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私</p>
</div>
</div>
<!-- ===============中间=============== -->
<div id="content">
<div id="login_page">
<!-- 提示栏 -->
<div id="div1">
<p><img src="img/xx.png" > 京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
</div>
<!-- 按钮块 -->
<div id="div2">
<button id="btn1">扫码登录</button>|
<button id="btn2">账号登录</button>
</div>
<!-- 输入框对应的块 -->
<div id="div3">
<!-- 用户名 -->
<div id="username">
<img src="img/pygame.png">
<input type="text" name="username" value="" placeholder="邮箱/用户名/已验证手机">
</div>
<!-- 密码 -->
<div id="password">
<img src="img/password_icon.png">
<input type="password" name="password" value="" placeholder="密码">
</div>
<a href="">忘记密码</a>
<button id="but3">登 录</button>
</div>
<!-- 注册和第三方登录块 -->
<div id="div4">
<a id="a1" href="" class="a1">QQ</a>|
<a id="a2" href="" class="a1">微信</a>
<a id="a3" href="">立即注册</a>
</div>
</div>
</div>
<!-- ===============底部=============== -->
<div id="footer">
<div>
<a href="">马云</a>|
<a href="">马化腾</a>|
<a href="">王思聪</a>|
<a href="">古天乐</a>|
<a href="">梁朝伟</a>|
<a href="">成龙</a>|
<a href="">刘欣</a>|
<a href="">刘强东</a>|
<a href="">李嘉诚</a>|
<a href="">王健林</a>|
<a href="">English Site</a>
</div>
<p>www.爱你们.com</p>
</div>
</body>
</html>
index.css
/* =============（通用）============= */
*{
/* 消除默认的margin */
margin:0;
/* 消除默认的padding */
padding:0;
/* 让所有标签的子标签都相对自己定位 */
position:relative;
}
/* ===============顶部=============== */
#header{
height: 130px;
background-color: seagreen;
}
/* <!-- 顶部的顶部 --> */
#header #top{
height: 80px;
background-color: white;
}
#header #top div{
width: 292px;
height: 80px;
/* background-color: hotpink; */
/* 相对定位-会让标签脱流 */
position: absolute;
left: 188px;
/* 垂直居中 */
top: 50%;
margin-top: -30px;
line-height: 60px;
}
#header #top #surver{
/* 布局 */
position: absolute;
right: 187px;
bottom: 15px;
/* 设置字体 */
color: rgb(180, 180, 180);
font-size: 12px;
/* 去掉下环线 */
text-decoration: none;
/* 添加背景图*/
/* background: url(图片地址) repeat/no-repeat x y 背景颜色 */
/* x,y: x坐标和y坐标对应的值，除了可以设置数字值以外还可以设置center,让背景图在x方向和y方向居中
*/
padding-left: 25px;
background:url(../img/q-icon.png) no-repeat 0 center white;
}
#header #top #surver:hover{
color: red;
text-decoration: underline;
}
/* <!-- 顶部的底部 --> */
#header #bottom{
height: 50px;
background-color: rgb(255,246,236);
}
#header #bottom{
/* 垂直方向居中 */
height: 50px;
line-height: 50px;
/* 水平方向居中 */
text-align: center;
/* 设置字体 */
color: rgb(180,180,180);
font-size: 12px;
}
#header #bottom p img{
/* 垂直居中 */
height: 25px;
position: absolute;
top: 50%;
margin-top: -12px;
line-height: -15px;
}
#header #bottom p a{
color: rgb(30,30,30);
/* 去掉下划线 */
text-decoration: none;
}
#header #bottom p a:hover{
/* 添加下划线 */
text-decoration: underline;
}
/* ===============中间=============== */
#content{
height: 470px;
/* 添加背景图 以及背景颜色*/
background: url(../img/bg2.png)no-repeat 100px center rgb(77,157,254);
}
#content #login_page{
height: 400px;
width: 350px;
background-color: white;
/* 定位 */
position: absolute;
right: 150px;
top: 20px;
}
/* 提示块 */
#content #login_page #div1{
height: 40px;
background-color: rgb(255,246,236);
}
#content #login_page #div1 p img{
/* 垂直居中 */
height: 16px;
position: absolute;
/* 水平居中 */
margin-top: 12px;
right: 305px;
}
#content #login_page #div1 p{
/* 垂直居中 */
height: 40px;
line-height: 40px;
/* 水平居中 */
text-align: center;
font-size: 12px;
color: rgb(180,180,180);
/* 设置字体粗细： 取值范围100~900 */
font-weigth: 100;
}
/* 选中登录方式 */
#content #login_page #div2{
height: 60px;
/* background: rgb(0,0,0); */
color: rgb(220, 220, 220, 0.6)
}
#content #login_page #div2 button{
width: 48%;
height: 100%;
background-color: white;
border: 0;
font-size: 18px;
color: rgb(60, 60, 60);
}
#content #login_page #div2 button:focus{
color: red;
/* 按钮成为焦点默认的边框效果是outline */
outline: 0;
}
/* 信息收集块 */
#content #login_page #div3{
height: 250px;
background-color: white;
/* 设置边框 */
border-top: solid rgba(220, 220, 220, 0.6) 1px;
border-bottom: solid rgba(220, 220, 220, 0.6) 1px;
}
#content #login_page #div3 div{
width: 300px;
height: 40px;
margin-left: 25px;
margin-top: 23px;
border: solid rgb(170, 170, 170) 1px;
}
#content #login_page #div3 #username{
margin-top: 35px;
}
#content #login_page #div3 div img{
width: 40px;
height: 40px;
float: left;
border-right: solid rgb(170, 170, 170) 1px;
}
/* 输入框 */
#content #login_page #div3 div input{
height: 40px;
width: 245px;
border: 0;
float: left;
padding-left: 10px;
font-size: 15px;
}
#content #login_page #div3 div input:focus{
outline: 0;
}
#content #login_page #div3 a{
position: absolute;
right: 25px;
margin-top: 20px;
color: rgb(130,130,130);
font-size: 12px;
text-decoration: none;
}
#content #login_page #div3 a:hover{
color: red;
text-decoration: underline;
}
/* 登录按钮 */
#content #login_page #div3 button{
width: 300px;
margin-left: 25px;
height: 35px;
position: absolute;
bottom: 20px;
background-color: rgb(219, 34, 46);
border: none;
color: white;
font-size: 20px;
}
#content #login_page #div4{
/* 垂直方向居中 */
height: 50px;
line-height: 50px;
font-size: 10px;
color: rgb(220,220,220,0.8);
}
#content #login_page #div4 #a1{
margin-left: 25px;
margin-right: 15px;
color: rgb(89,89,89);
padding-left: 25px;
background: url(../img/qq.png) no-repeat 0 center white;
}
#content #login_page #div4 #a2{
margin-left: 5px;
color: rgb(89,89,89);
padding-left: 25px;
background: url(../img/weixin.png) no-repeat 0 center white;
}
#content #login_page #div4 #a3{
position: absolute;
right: 25px;
color: rgb(165,19,23);
font-size: 12px;
padding-left: 25px;
background: url(../img/right.png) no-repeat 0 center rgb(0,0,0,0);
}
#content #login_page #div4 a{
text-decoration: none;
}
#content #login_page #div4 #a1:hover{
color: red;
text-decoration: underline;
}
#content #login_page #div4 #a2:hover{
color: red;
text-decoration: underline;
}
#content #login_page #div4 #a3:hover{
color: red;
text-decoration: underline;
}
/* ===============底部=============== */
#footer{
height: 105px;
background-color: white;
}
#footer div{
height: 50px;
background-color: white;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 50px;
font-size: 13px;
color: rgb(89,89,89);
}
#footer div a{
margin-left: 10px;
margin-right: 10px;
color: rgb(89,89,89);
text-decoration: none;
}
#footer div a:hover{
color: red;
text-decoration: underline;
}
#footer p{
color: rgb(89,89,89);
font-size: 13px;
/* 水平居中 */
text-align: center;
}
运行结果如下：
image.png
