练习，京东登录界面
2019-12-06 本文已影响0人
Dxes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--设置网页标题-->
<title>京东-欢迎登录</title>
<!--设置网页图标-->
<link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
<!--导入样式表-->
<link rel="stylesheet" type="text/css" href="css/24-京东登录.css"/>
</head>
<body>
<!--==============页面顶部=================-->
<div id="header">
<!--====顶部logo====-->
<div id="logo">
<!--logo-->
<div id="">
<a href="https://www.jd.com/"><img src="img/jingdong/logo-201305-b.png"/></a>
<img src="img/jingdong/l-icon.png"/>
</div>
<!--问卷调查-->
<a target="_blank" href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans"><img src="img/jingdong/q-icon.png"/>登录页面，调查问卷</a>
</div>
<!--====隐私政策====-->
<div id="privacy">
<font>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a target="_blank" href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</font>
</div>
</div>
<!--==============中间内容部分==============-->
<div id="content">
<div id="loginBox">
<!--警告-->
<div id="box1">
<font>京东不会以任何理由要求您转账汇款，谨防诈骗。</font>
</div>
<!--登录按钮-->
<div id="box2">
<button>扫码登录</button>
<font>|</font>
<button>账号登录</button>
</div>
<!--账号密码-->
<div id="box3">
<!--账号-->
<div>
<label for="userName"><img src="img/jingdong/pygame.png"/></label>
<input placeholder="邮箱/用户名/登录手机" type="text" name="userName" id="userName" value="" />
</div>
<!--密码-->
<div id="">
<label for="password"><img src="img/jingdong/password_icon.png"/></label>
<input placeholder="密码" type="password" name="password" id="password" value="" />
</div>
<!--忘记密码-->
<a target="_blank" href="https://aq.jd.com/process/findPwd?s=1">忘记密码</a>
<!--登录-->
<button>登 录</button>
</div>
<!--第三方登录-->
<div id="box4">
<a id="qq" href="">QQ</a>
<font>|</font>
<a id="weixin" href="">微信</a>
<a id="register" href="">立即注册</a>
</div>
</div>
</div>
<!--==============页面底部==================-->
<div id="footer">
<div id="">
<a href="">关于我们</a><font>|</font>
<a href="">联系我们</a><font>|</font>
<a href="">人才招聘</a><font>|</font>
<a href="">商家入驻</a><font>|</font>
<a href="">广告服务</a><font>|</font>
<a href="">手机京东</a><font>|</font>
<a href="">友情链接</a><font>|</font>
<a href="">销售联盟</a><font>|</font>
<a href="">京东社区</a><font>|</font>
<a href="">京东公益</a><font>|</font>
<a href="">English Site</a>
</div>
<p>Copyright © 2004-2019 京东JD.com 版权所有</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/*==================页面顶部=====================*/
#header{
height: 120px;
/*background-color: hotpink;*/
}
/*======logo部分======*/
#header>#logo{
height: 80px;
position: relative;
}
#logo>div{
left: 150px;
position: absolute;
/*垂直方向居中*/
top: 40px;
margin-top: -30px;
}
#logo>div>img{
margin-left: 20px;
}
/*调查问卷*/
#logo>a{
right: 170px;
bottom: 10px;
position: absolute;
font-size: 12px;
color: rgb(148, 148, 148);
text-decoration: none;
}
#logo>a:hover{
text-decoration: underline;
color: rgb(216, 36, 50);
}
#logo>a>img{
/*设置垂直方向的对齐方式*/
vertical-align: middle;
margin-right: 5px;
}
/*======隐私政策=======*/
#privacy{
height: 40px;
background-color: rgb(255, 246, 236);
/*一行内容垂直方向居中*/
line-height: 40px;
/*内容在水平方向居中*/
text-align: center;
}
#privacy>font{
font-size: 12px;
color: rgb(148,148,148);
/*设置背景图
background: 图片地址 是否平铺 水平方向的位置(left/right/center/x坐标) 垂直方向的位置(top/center/bottom/y坐标) 背景颜色
*/
background: url(../img/jingdong/icon-tips.png) no-repeat 0 center rgba(0,0,0,0);
padding-left: 20px;
}
#privacy>font>a{
color: rgb(57,57,57);
/*去掉下划线*/
text-decoration: none;
}
#privacy>font>a:hover{
text-decoration: underline;
}
/*==================中间内容=====================*/
#content{
height: 475px;
background: url(../img/jingdong/6efbf2cadd6042e2.jpg) no-repeat 150px 0 #EBD2AA;
position: relative;
}
#loginBox{
width: 350px;
height: 400px;
background-color: white;
top: 10px;
right: 170px;
position: absolute;
}
#box1{
height: 40px;
background-color: rgb(255, 246, 236);
line-height: 40px;
text-align: center;
}
#box1>font{
font-size: 12px;
color: rgb(148,148,148);
background: url(../img/jingdong/icon-tips.png) no-repeat 0 center rgba(0,0,0,0);
padding-left: 20px;
}
#box2{
height: 50px;
/*background-color: chartreuse;*/
line-height: 50px;
}
#box2>button{
width: 168px;
height: 100%;
border: 0;
font-size: 19px;
color: rgb(83,83,83);
font-weight: 400;
outline: 0;
}
/*设置box2中最后一个button*/
#box2>button:last-child{
color: rgb(216, 36, 50);
font-weight: 500;
}
#box2>button:hover{
color: rgb(216, 36, 50);
font-weight: 500;
}
/*竖线*/
#box2>font{
color: rgb(241,241,241);
font-size: 20px;
font-weight: 100;
}
/*============输入账号密码=========*/
#box3{
height: 260px;
/*background-color: khaki;*/
border-top: 1px solid rgb(241,241,241);
border-bottom: 1px solid rgb(241,241,241);
position: relative;
}
/*账号密码*/
#box3>div{
width: 310px;
height: 40px;
border: 1px solid rgb(184,184,184);
margin-left: 20px;
/*margin-top: 20px;*/
}
#box3>div:first-child{
margin-top: 35px;
margin-bottom: 20px;
}
#box3>div img{
width: 40px;
height: 40px;
border-right: 1px solid rgb(184,184,184);
}
#box3>div>input{
height: 40px;
width: 255px;
border: 0;
outline: 0;
vertical-align: top;
font-size: 14px;
padding-left: 5px;
}
/*忘记密码*/
#box3>a{
right: 20px;
position: absolute;
margin-top: 20px;
font-size: 12px;
color: rgb(83, 83, 83);
text-decoration: none;
}
#box3>a:hover{
color: rgb(216, 36, 50);
text-decoration: underline;
}
#box3>button{
height: 35px;
width: 310px;
left: 20px;
bottom: 30px;
position: absolute;
border: 0;
outline: 0;
background-color: rgb(216, 36, 50);
font-size: 22px;
color: white;
}
#box4{
height: 50px;
/*background-color: lightblue;*/
line-height: 50px;
}
#qq{
margin-left: 20px;
font-size: 13px;
color: rgb(83,83,83);
text-decoration: none;
background: url(../img/jingdong/qq.png) no-repeat 0 center rgb(0,0,0,0);
padding-left: 25px;
}
#weixin{
font-size: 13px;
color: rgb(83,83,83);
text-decoration: none;
background: url(../img/jingdong/weixin.png) no-repeat 0 center rgb(0,0,0,0);
padding-left: 25px;
}
#qq:hover,#weixin:hover{
color: rgb(216, 36, 50);
text-decoration: underline;
}
#register{
right: 20px;
position: absolute;
font-size: 14px;
color: rgb(163, 14, 28);
text-decoration: none;
/*font-weight: 500;*/
background: url(../img/jingdong/right.png) no-repeat 0 center rgb(0,0,0,0);
padding-left: 25px;
}
#register:hover{
text-decoration: underline;
}
#box4>font{
font-size: 12px;
color: rgb(200,200,200);
font-weight: 500;
margin-left: 7px;
margin-right: 5px;
}
/*==================页面底部=====================*/
#footer{
height: 105px;
/*background-color: lightskyblue;*/
}
#footer>div{
height: 50px;
line-height: 50px;
text-align: center;
}
#footer>div>a{
font-size: 12px;
color: rgb(83,83,83);
text-decoration: none;
}
#footer>div>a:hover{
text-decoration: underline;
color: rgb(216, 36, 50)
}
#footer>div>font{
font-size: 12px;
color: rgb(83,83,83);
margin-left: 15px;
margin-right: 9px;
}
#footer>p{
text-align: center;
font-size: 12px;
color: rgb(83,83,83);
}
