css
/*=====通用=====*/
*{
/*取消间距*/
margin: 0;
padding: 0;
font-family: "宋体";
/*所有标签的子标签相对自己定位*/
position: relative;
}
a{
/*取消所有a标签的下划线*/
text-decoration: none;
}
/*=======网页顶部=======*/
/*=======网页中部=======*/
/*focus - 成为焦点对应的状态*/
.b1:focus{
/*去掉outline*/
outline: 0px;
color: red;
}
.b2{
width: 80%;
height: 40px;
color: white;
/*设置圆角*/
border-radius: 7px;
background-color: rgb(228,57,60);
font-size: x-large;
}
.b2:focus{
outline: 0px;
}
#a1{
text-decoration: none;
color: grey;
font-size: small;
}
#a1:hover{
text-decoration: underline;
color: red;
}
#a2{
text-decoration: none;
}
#a2:hover{
text-decoration: underline;
color: red;
}
#a3:hover{
color: red;
font-size: xx-large;
}
/*======网页底部======*/
网页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>京东-欢迎登陆</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
<style type="text/css">
body{
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!--网页顶部-->
<div id="" style="background-color: white; height: 90px;">
<a href="https://www.jd.com/">
<img src="img/logo.png" style="position: relative;left: 25%; top: 18%;"/>
</a>
<img src="img/l-icon.png" style="position: relative;left: 26%; top: 18%;"/>
<img src="img/q-icon.png" style="position: relative;left: 54%; top: 25px;"/>
<a id="a1" href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans" target="_blank" style="position: relative;left: 54%; top: 21px;">登录页面，调查问卷</a>
</div>
<!--网页中部-->
<div id="" style="background-color:rgb(255, 248, 240); height: 30px;">
<p align="center" style="color: #808080; line-height: 30px;
font-size: 12px; font-family: '宋体';">
<img src="img/warning.png" align="center"/>
依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
<a id="a2" href="https://about.jd.com/privacy/" target="_blank" style="color: black;">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
<!--618狂欢-->
<div style=" height: 470px; background-color:orangered" align="center">
<img src="img/bg1.png" style="position: relative;right: 15%; top: 32px; height: 440px;" />
</div>
<!--登陆界面-->
<div style="position: relative; left: 58%; top: -450px;">
<div style="background-color: white; width: 360px; height: 400px;"></div>
<!--提示界面-->
<div style="width: 360px;height: 40px; background-color:rgb(255, 248, 240);
position: relative;top: -400px; " align="center">
<img src="img/warning.png" style="position: relative;top: 10px;"/>
<font style="line-height: 40px; font-size:12px; color: #808080">京东不会以任何理由要求您转账汇款，谨防诈骗。</font><br />
<!--登陆-->
<div id="">
<button id="a3" class="b1" style=" position: relative;left: -40px;top: 0px; font-size: larger;
width: 80px;height: 70px; border: 0px; background-color: white;">
<b>扫码登陆</b></button>
<!--竖线-->
<font style="color: rgba(220,220,220,0.6); position: relative;left: -10px;">|</font>
<button id="a3" class="b1" style=" position: relative;left: 20px; top: 0px;font-size: larger;
width: 80px;height: 70px; border: 0px; background-color: white;">
<b>账号登陆</b></button>
<hr style="margin-top:-5px;border:1px solid rgba(220,220,220,0.5); position: relative;top: 0px;"/>
</div>
<!--登陆框-->
<from>
<div id="username" style="position: relative;top: 40px; left: 5px;">
<img src="img/pygame.png" border="1" />
<input type="text" name="name" style="position: relative;top: -15px; left: -8px; height: 35px; padding-left: 10px;"
size="40" placeholder="邮箱/用户名/已验证手机"/>
</div>
<!--密码框-->
<div id="password" style="position: relative;top: 40px; left: 5px;">
<img src="img/password_icon.png" border="1" />
<input type="password" name="password" style="position: relative;top: -15px; left: -8px; height: 35px; padding-left: 10px;"
size="40" placeholder="密码"/>
</div>
<!--忘记密码-->
<div id="" style="position: relative;top: 50px;left: 140px;">
<a id="a2" href="https://aq.jd.com/process/findPwd?s=1" style="font-size: x-small;" target="_blank">忘记密码</a>
</div>
<!--登陆按钮-->
<div id="">
<button class="b2" style="position: relative;top: 70px;">登 陆</button>
</div>
<!--其他登陆方式-->
<div id="" style="background-color: rgb(252,252,252); width: 100%; height: 30px; position: relative;top: 90px;">
<!--qq登陆-->
<a target="_blank" href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=413E159761FB962C0CEE4E1E046A4271569230D29DB42FB405F20011F4959D18DF9EDF31522719E8FE96C897B5B8FEE5&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fqq%2Fcallback.action%3Fview%3Dnull%26uuid%3D5bebe4b6e6fc47d092b3e6e78948640c">
<img src="img/qq.png" style="float: left;left: 20px;"/></a>
<a target="_blank" id="a2" href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=19F147A687DCE749869E3B448CE7D96E96217FBDD7FDAE391DABFEBA4AD68B515BDB09564EF9A3466EB3CE3650F5349A&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fqq%2Fcallback.action%3Fview%3Dnull%26uuid%3D4b07d9118811463f8aed6cc71692695b"
style="float: left; line-height: 25px;left: 25px;">QQ</a>
<!--竖线-->
<font style="color: rgba(220,220,220,1); position: relative;left: -120px; top: 3px;">|</font>
<!--微信登陆-->
<a target="_blank" href="https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=400D75A604CF84FB1D27F1A0A717E0F7EC0110487C3672CDAD600F72BA1F67199974444B4DB727825C21B9E7C5B1FC34&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Ddf02c0aa28054852bb175f9357539096&response_type=code&scope=snsapi_login#wechat_redirect"
><img src="img/weixin.png" alt="" style="float: left;left: 70px;"/></a>
<a target="_blank" id="a2" href="https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=400D75A604CF84FB1D27F1A0A717E0F7EC0110487C3672CDAD600F72BA1F67199974444B4DB727825C21B9E7C5B1FC34&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Ddf02c0aa28054852bb175f9357539096&response_type=code&scope=snsapi_login#wechat_redirect"
style="float: left; line-height: 25px;left: 75px; font-size: small;">微信</a>
<!--立即注册-->
<a href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com"
target="_blank"><img src="img/right.png" alt="" style="float: left;left: 155px;"/></a>
<a target="_blank" id="a2" href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com"
style="float: right;right: 25px; line-height: 25px; color: red;">立即注册</a>
</div>
</from>
</div>
<!--尾部-->
<div id="" style="position: relative;top:30px; left: -1100px;" align="center">
<p style="font-size: smaller; color: grey;">
<a id="a2" target="_blank" href="https://www.jd.com/">关于我们</a>
|
<a id="a2" target="_blank" href="http://about.jd.com/contact"> 联系我们 </a>
|
<a id="a2" target="_blank" href="http://zhaopin.jd.com/home;jsessionid=94019DDF4088C252912D3E76B4C65661.s1">人才招聘 </a>
|
<a id="a2" target="_blank" href="https://www.jd.com/">商家入驻</a>
|
<a id="a2" target="_blank" href="https://www.jd.com/">广告服务</a>
|
<a id="a2" target="_blank" href="https://app.jd.com/">手机京东</a>
|
<a id="a2" target="_blank" href="https://club.jd.com/links.aspx"> 友情链接</a>
|
<a id="a2" target="_blank" href="https://media.jd.com/">销售联盟</a>
|
<a id="a2" target="_blank" href="https://sale.jd.com/act/n0hAvqy5CW8.html">京东社区</a>
|
<a id="a2" target="_blank" href="https://gongyi.jd.com/">京东公益</a>
|
<a id="a2" target="_blank" href="https://www.joybuy.com/">English Site</a>
</p>
</div>
<!--版权-->
<div id="" style="position: relative;top:50px; left: -270px; font-size:12px; color:grey;">
Copyright © 2004-2018 京东JD.com 版权所有
</div>
</body>
</html>
网友评论