<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/layui.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<title>理想生活上天猫</title>
<style type="text/css">
#mainpage{
background-color: transparent;
}
/* 页头大小 */
#header{
display: block;
padding: 22px 0px;
height: 44px;
width: 1190px;
margin: auto;
}
/* 页头图片 */
#header>img{
width:190px;
height:27px;
margin-top:8px;
border:0;
}
/* 主体 */
#main{
width:1300px;
height:600px;
background-image: url("./resource/bgimg.jpg");
display: block;
margin: auto;
}
/* 登录部分 */
#submit{
width:350px;
height: 404px;
overflow:hidden;
margin:100px 50px 200px 800px;
float:left;
position:absolute;
background-color: white;
padding: 25px 26px 20px;
}
#submit>img{
position:relative;
float:right;
cursor: pointer;
}
#submit>p{
height: 18px;
line-height: 18px;
font-size: 16px;
color: #3c3c3c;
font-weight: 700;
margin-top: 25px;
margin-left:30px;
}
.c1{
width:298px;
height:42px;
margin: 0 auto;
padding-top: 12px;
background-color: white;
margin-top: 25px;
}
.c1>input{
width: 260px;
height: 35px;
}
/* 按钮部分 */
button{
display:inline-block;
vertical-align: middle;
width: 300px;
height: 42px;
line-height: 42px;
background-color: #ff0036;
border:0;
color:white;
margin-top:20px;
margin-left:23px;
overflow: hidden;
font: "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;;
border-radius:3px;
cursor: pointer;
font-weight: 700;
zoom: 1;
}
#submit>ul{
margin-top:25px;
list-style-type: none;
color:rgb(108, 108, 108);
text-align: right;
}
#submit>ul>a>li{
float:right;
margin-right:10px;
}
/* 页脚 */
#footer{
height: 220px;
margin-left:80px;
margin-top:22px;
}
#footer>p{
margin:0 auto;
padding: 5px 0;
text-align: left;
font: 12px/1.5 tahoma,arial,"\5b8b\4f53";
display:block;
}
p>a{
line-height: 25px;
text-align: left;
margin-right: 3px;
font-weight:400;
}
p2{
height: 50px;
}
#cr{
height: 125px;
font-size:12px;
color: #666;
line-height: 20px;
margin: 0 auto;
display: block;
text-align: left;
}
#cr>span{
display:inline-block;
margin-bottom: 5px;
}
.hide{
display:none;
}
#QRCode{
width:350px;
height: 404px;
overflow:hidden;
margin:100px 50px 200px 800px;
float:left;
position:absolute;
background-color: white;
padding: 25px 26px 20px;
}
#QRCode>#PC{
position:relative;
float:right;
display: block;
cursor: pointer;
}
#QRCode>p{
display:block;
height: 18px;
line-height: 18px;
font-size: 16px;
color: rgb(60, 60, 60);
font-weight: 700;
overflow: hidden;
margin-top: 30px;
}
#QRCode>#DL{
margin-top:50px;
}
#QRCode>#DL>img{
display:block;
margin:0 auto;
}
#underQR{
margin-top:30px;
background-image: url("./resource/swapICON.png");
background-repeat: no-repeat;
background-position: 90px;
overflow: hidden;
}
#underQR>p{
margin-left: 128px;
color: #6c6c6c;
font-size: 12px;
}
#others{
color: #6c6c6c;
margin-top: 20px;
margin-left: 200px;
}
/* 扫码登录换图实现 */
.content {
position: relative;
width: 300px;
height: 140px;
}
.static-content {
position: absolute;
width: 100%;
height: 70%;
opacity: 1;
margin-top: 20px;
transition: opacity 2s ease-in-out;
}
.static-content>img{
margin-left:125px;
}
.hover-content {
position: absolute;
width: 100%;
height: 80%;
opacity: 0;
margin-left: 50px;
transition: opacity 2s ease-in-out;
}
.content:hover .static-content {
opacity: 0;
}
.content:hover .hover-content {
opacity: 1;
}
</style>
<script type="text/javascript">
function changeToQR(){
QRCode.className="show";
submit.className="hide";
}
function changeToPW(){
submit.className="show";
QRCode.className="hide";
}
</script>
</head>
<body>
<div id="mainpage">
<!-- 页头部分 -->
<div id="header">
<!-- 天猫图像 -->
<img src="./resource/topleftlogo.png">
<!-- 密码登录 -->
<div id="submit" class="show">
<img title="扫码登录更安全哟~"
src="./resource/changeToQR.png" onclick="changeToQR()">
<p>密码登陆</p>
<!-- 登录模式选择 -->
<div id="loginswitch">
</div>
<!-- 用户名 -->
<div id="usn" class="c1">
<i class="layui-icon layui-icon-username" style="font-size: 30px;
color: #1E9FFF;background-color:#DDDDDD;margin-top:500px;"></i>
<input type="text" name="username"
placeholder="会员名/邮箱/手机号"><br>
</div>
<!-- 密码 -->
<div id="pwd" class="c1">
<i class="layui-icon layui-icon-password" style="font-size: 30px;
color: #1E9FFF;background-color:#DDDDDD;"></i>
<input type="password" name="pwd"><br>
</div>
<!-- 登录按钮 -->
<button type="button" >登 陆</button>
<!-- 备用方式 -->
<ul>
<a href=""><li>忘记密码</li></a>
<a href=""><li>忘记会员名</li></a>
<a href=""><li>免费注册</li></a>
</ul>
</div>
<!-- 扫码登录 -->
<div class="hide" id="QRCode">
<!-- 电脑图标 -->
<img id="PC" src="./resource/changeToPC.png" onclick="changeToPW()">
<!-- 提示字符串:手机扫码,安全登录 -->
<p>手机扫码,安全登录</p>
<br>
<!-- 用来扫的二维码图片 -->
<div class="content">
<div class="static-content" id="DL">
<img src="./resource/dlQRcode.png">
</div>
<div class="hover-content">
<img src="./resource/CodeAndSwap.png">
</div>
</div>
<!-- 提示操作字符串 -->
<div id="underQR">
<!-- <img id="swap" src="./resource/swapICON.png"> -->
<p><font class="ft-gray">打开 </font>
<a href="">手机天猫</a> | <a href="" >手机淘宝</a>
<br>
<span class="ft-gray" >扫一扫登录</span></p>
</div>
<!-- 其他方式或注册 -->
<div id="others">
<a href="" onclick="changeToPW()">密码登录</a>
<a href="">免费注册</a>
</div>
</div>
</div>
<div id="main"></div>
</div>
<!-- 页脚部分 -->
<div id="footer">
<p id="p1">
<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>
</p>
<p id="p2">
<a href="" >阿�
仿天猫登陆web页面 css+js+html
需积分: 50 46 浏览量
2019-11-30
20:58:57
上传
评论 3
收藏 117KB RAR 举报
Pink3Y
- 粉丝: 2
- 资源: 3