接触前端一小段时间以来，第一次自己写出一个静态页面，可能会存在不足，但是还是很开心，是收获学习成果的喜悦！另外，学习前端需要图标素材的话，可以在https://www.iconfont.cn/找到许多不错的图标哦。
——————————————————————————————
仿京东-欢迎登录.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 标题 -->
<title>仿京东-欢迎登录</title>
<!-- 引用外部css文件 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 引用外部js文件 -->
<script type="text/javascript" src="function.js"></script>
</head>
<body>
<!--头部div-->
<div class="header">
<div class="w">
<div class="logo">
<a href="https:www.jd.com"><div class="logo1"></div></a>
<div class="logo2"></div>
</div>
<div class="box2">
<a href="#" style="float: right;">登录页面，调查问卷</a>
<div class="q-icon"></div>
</div>
</div>
</div>
<!--内容标题div-->
<div class="content-title">
<div class="box1">
<div class="icon" style="background-image: url(icon-tips.png);"></div>
<div class="titles">
<p>
依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="#",id="a1">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
</p>
</div>
</div>
</div>
<!--内容div-->
<div class="content">
<div class="c">
<div class="box">
<div class="tishi">
<div class="tishis">
<p>
京东不会以任何理由要求您转账汇款，谨防诈骗。
</p>
</div>
<div class="icons"></div>
</div>
<div class="main">
<!--扫码登录-->
<div class="main-a1" onclick="change1()">
<p style="margin: 13.5px auto;border-right: 1px solid #f4f4f4;"><a href="#" style="color: red;text-decoration: none;font-size: 22px;" id="a1">扫码登录</a></p>
</div>
<!--密码登录-->
<div class="main-a2" onclick="change2()">
<p style="margin: 13.5px auto;"><a href="#" style="font-size: 22px;text-decoration: none;" id="a2">账户登录</a></p>
</div>
</div>
<!--扫码登录-->
<div id="ma1">
<img src="erweima.png" style="margin-bottom: 12px;">
<p style="margin-top: 6px;">打开<a href="#" style="color: red;text-decoration: none;">手机京东</a> 扫描二维码</p>
<p style="margin: 6px auto;">免输入 更快 更安全</p>
</div>
<!--密码登录-->
<div id="ma2">
<div class="inputer-top">
<div class="lefter"></div>
<input type="text" class="caidan" placeholder=" 邮箱/用户名/登录密码">
</div>
<div class="inputer-top">
<div class="lf"></div>
<input type="password" class="caidan" placeholder=" 密码">
</div>
<a href="#">忘记密码</a>
<button>登 录</button>
</div>
<div class="root">
<div class="box3">
<div class="root-link">
<img src="icon_QQ.png" width="20px">
<a href="#">QQ</a> |
<img src="weixin.png" width="20px">
<a href="#">微信</a>
</div>
<a href="#" style="color: red;float:right;margin-top:15.5px;margin-bottom:15.5px;">立即注册</a>
<div style="width: 16px;height:16px;float:right;margin: 18px auto;"><img src="fill.png"></div>
</div>
</div>
</div>
</div>
</div>
<!--底部div-->
<div class="footer">
<div class="w">
<div class="links" style="text-align: center;">
<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>
<div class="copyright" style="text-align: center;margin: 10px auto;">
opyright©2004-2019 京东JD.com 版权所有
</div>
</div>
</div>
</body>
</html>
style.css
/*清除浏览器默认样式*/
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 85px;
}
.w{
width: 990px;
height: 100%;
margin: 0 auto;
}
.logo{
width: 300px;
height: 60px;
float: left;
margin: 12.5px auto;
}
.logo1{
width: 170px;
height: 60px;
float: left;
background-image: url(logo1.png);
}
.logo2{
width: 110px;
height:40px;
margin-top: 20px;
margin-left: 20px;
float: left;
background-image: url(logo2.png);
}
.box2{
width: 170px;
height: 21px;
float: right;
margin-bottom: 12.5px;
margin-top: 51.5px;
}
.q-icon{
width: 18px;
height: 21px;
margin-top: 5px;
margin-left: 4px;
margin-right: 4px;
background-image: url(q-icon.png);
background-repeat: no-repeat;
float: right;
}
.content-title{
width: 100%;
height: 40px;
background-color: rgb(255,248,240);
margin: 0 auto;
}
.box1{
width: 1049px;
height: 100%;
margin: 0 auto;
}
.icon{
width: 16px;
height: 16px;
float: left;
margin-top: 15px;
margin-bottom: 9px;
margin-right: 4px;
}
.titles{
width: 24;
height: 18px;
padding-top: 12px;
text-align: center;
float: left;
}
.content{
width: 100%;
height: 475px;
background-color: rgb(23,4,68);
}
.c{
width: 990px;
height:475px;
margin: 0 auto;
background-image: url(background.png);
background-repeat: no-repeat;
}
.box{
width: 390px;
height: 440px;
background-color: white;
float: right;
margin-top: 10px;
margin-bottom: 25px;
}
.tishi{
width: 100%;
height: 42px;
background-color:rgb(255,248,240);
}
.tishis{
width: 360px;
height: 21px;
float: right;
margin-top:10.5px;
margin-bottom: 10.5px;
text-align: center;
}
.icons{
width: 16px;
height: 16px;
margin-bottom: 12.5px;
margin-top: 14.5px;
background-image: url(icon-tips.png);
float: right;
}
.main{
width: 100%;
height: 58px;
border-bottom:1px solid #f4f4f4;
}
.main-a1,.main-a2{
height: 55px;
width: 195px;
float: left;
text-align: center;
}
#ma1,#ma2{
width: 100%;
height: 215px;
text-align: center;
padding-top: 30px;
padding-bottom: 28px;
}
#ma2{
display: none;
}
.inputer-top{
width: 304px;
height: 38px;
margin: 0 auto;
margin-bottom: 20px;
}
.lefter{
width: 37px;
height: 36px;
background-image: url(pew.png);
border: 1px solid #bdbdbd;
border-right: none;
display:inline-block;
}
.caidan{
width: 264px;
height: 36px;
float: right;
border: 1px solid #bdbdbd;
border-collapse: collapse;
}
.lf{
width: 37px;
height: 36px;
background-image: url(pew.png);
background-position: -48px 0;
border: 1px solid #bdbdbd;
border-right: none;
display: inline-block;
}
#ma2 a{
float: right;
margin-right: 43px;
margin-bottom: 20px;
}
button{
width: 304px;
height: 33px;
color: #fff;
font-size: 20px;
font-family: 'Microsoft YaHei';
background-color: #e4393c;
border: 1px solid #e85356;
}
.root{
width: 100%;
height: 52px;
background-color: rgb(252,252,252);
float:
}
.box3{
height: 100%;
width: 350px;
margin: 0 auto;
}
.root-link{
float: left;
text-align: center;
margin-top:15.5px;
margin-bottom:15.5px;
width: 130px;
}
.footer{
width: 100%;
height: 108px;
margin-top: 24px;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: red;
text-decoration: underline;
}
function.js
// 切换扫码登录
function change1(){
var obset1=document.getElementById("ma1");
var obset2=document.getElementById("ma2");
obset2.style.display="none";
obset1.style.display="block";
var a1=document.getElementById("a1");
var a2=document.getElementById("a2");
a1.style.color="red";
a2.style.color="black";
}
// 切换密码登录
function change2(){
var obset1=document.getElementById("ma1");
obset1.style.display="none";
var obset2=document.getElementById("ma2");
obset2.style.display="block";
var a1=document.getElementById("a1");
var a2=document.getElementById("a2");
a1.style.color="black";
a2.style.color="red";
}
相关引用图片
background.png
erweima.png
fill.png
icon_QQ.png
icon-tips.png
logo1.png
logo2.png
pew.png
q-icon.png
weixin.png
