代码如下
<head> <meta charset="UTF-8"> <title>欢迎登陆</title> <style> * { margin: 0px; padding: 0px; } a { text-decoration: none; } fieldset { display: inline-block; width: 340px; margin-top: 70px; color: #999; border: none; border-top: 1px solid #999; text-align: center; font-size: 13px; margin-left: 33px; } .zong { width: 100%; height: 100%; } .top { width: 100%; height: 100px; background-image: url(img/mistore_logo.png); background-repeat: no-repeat; background-position: 400px; } .banner { width: 100%; height: 588px; background: url(img/af1d661322b54160a34bd319a671b6d9.jpg) no-repeat left; } .banner_box { height: 500px; width: 400px; background: white; position: absolute; right: 70px; margin-top: 44px; } .banner_box input { height: 50px; width: 360px; margin-top: 30px; margin-left: 20px; font-size: 15px; } .dl { display: inline-block; margin-top: 30px; margin: auto; margin-left: 80px; font-size: 22px; color: #f56600; margin-right: 15px; font-family: "微软雅黑"; } .sm { display: inline-block; margin-top: 30px; font-size: 22px; margin-left: 15px; color: black; font-family: "微软雅黑"; } .z_zc { font-size: 11px; float: right; margin-top: 10px; margin-right: 18px; } .y_zc { font-size: 11px; float: left; margin-top: 10px; margin-left: 18px; } .img_t { margin-left: 30px; cursor: pointer; } .img_tc { cursor: pointer; margin-left: 90px; } .img { height: 30px; width: 400px; margin: 30px auto; position: absolute; bottom: 13px; } .zhdl { visibility: visible; } .smdl { visibility: hidden; position: absolute; top: 290px; right: 117px; } .smdl p { font-size: 15px; text-align: center; } .footer { width: 100%; height: 170px; background-color: white; } .footer p { padding-top: 60px; text-align: center; color: darkgray; color: #F56600; } .footer li { float: left; list-style: none; margin-left: 30px; font-size: 14px; } .footer .li { margin-left: 780px; font-size: 14px; } .footer ul { padding-top: 90px; } .footer a { color: #F56600; } </style> </head> <body> <!--页面大容器--> <div class="zong"> <!--页面头部部分--> <div class="top"> <!-- <img class="top_logo" src="img/mistore_logo.png" /> --> </div> <!--页面中部部分--> <div class="banner"> <div class="banner_box"> <a href="#" class="dl" id="zh" onclick="dl()">账号登录</a> <span style="color: #e0e0e0">|</span> <a href="#" class="sm" id="sm" onclick="sm()">扫码登陆</a> <div class="zhdl" id="zhdl"> <form> <input type="text" placeholder="邮箱/手机号/小米ID" /> <input type="password" placeholder="请输入密码" /> <input style="background-color: #F56600; border: none; color: white;" type="submit" value="登录"> </form.000> <span class="y_zc"> <a href="#" style="color: #f56600;">手机短信登陆/注册</a> </span> <span class="z_zc"> <a href="#" style="color: black;">立即注册</a> <span>|</span> <a href="#" style="color: black;">忘记密码?</a> </span> <form> <!--当一组表单元素放到 <fieldset>标签内时， 浏览器会以特殊方式来显示它们， 它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。 --> <fieldset> <legend>其他方式登录</legend> </fieldset> </form> <div class="img"> <img class="img_tc" src="img/qq.png" /> <img class="img_t" src="img/weixin.png" /> <img class="img_t" src="img/xinlang.png" /> <img class="img_t" src="img/zhifubao.png" /> </div> </div> </div> </div> <div class="smdl" id="smdl"> <img style="margin-left: 63px;" src="img/下载.png" /> <p>使用<span style="color:#f56600 ;">小米商城APP</span>扫一扫</p> <p>小米手机可打开⌈设置⌋ > ⌈小米账号⌋ 扫码登陆</p> </div> </div> <!--页面底部部分--> <div class="footer"> <ul> <li class="li"> <a href="#">简体</a> </li> <li>|</li> <li> <a href="#">繁体</a> </li> <li>|</li> <li> <a href="#">英语</a> </li> <li>|</li> <li> <a href="#">常见问题</a> </li> </ul> <p>XXXXXXXXX版权所有-X ICP备XXXXXXXXXXXXXXX-X <img src="img/ghs.png"> 公网安备XXXXXXXXXXXX号-X ICP证XXXXXXXXX号</p> </div> <script type="text/javascript"> var smc = document.getElementById("sm"); var dld = document.getElementById("zh"); var dljm = document.getElementById("zhdl"); var smdl = document.getElementById("smdl"); function sm() { smc.style.color = "#f56600"; dld.style.color = "black"; dljm.style.visibility = "hidden"; smdl.style.visibility = "visible"; } function dl() { smc.style.color = "black"; dld.style.color = "#f56600"; dljm.style.visibility = "visible"; smdl.style.visibility = "hidden"; } </script> </body>效果图
