2019-9-16 小米商城登录页面

原创2019-09-16 14:32:1440
摘要:在线浏览地址:http://www.pursuer.top/xiaomi1/login.htmlhtml部分:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>登录</title> 

在线浏览地址:http://www.pursuer.top/xiaomi1/login.html

html部分:


<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>登录</title>

    <link rel="shortcut icon"  type="image/x-icon" href="static/images/footlogo.png">

    <link rel="stylesheet" href="static/css/login.css">

    <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">

</head>

<body>

    <!-- 头部 -->

    <div>

        <a href="index.html"><img src="static/images/5.png" alt=""></a>

    </div>

    <!-- 主体部分 -->

    <div>

        <div>

            <div>

                <div>

                    <p id="regTabs_0" onclick="ChangReg('0','register_',1)" style="color: #ff6700;">账号登录</p>

                    <span>|</span>

                    <p id="regTabs_1" onclick="ChangReg('1','register_',1)">扫码登录</p>

                </div>

                <div></div>

                <div id="register_0">

                    <form action="">

                        <input type="text" placeholder="请输入用户名/邮箱/小米ID">

                        <input type="password" placeholder="请输入8-16位数字、字母、下划线组成的密码">

                        <button>登录</button>

                    </form>

                    <div>

                        <div>

                            <a href="#">验证码登录</a>

                        </div>

                        <div>

                            <a href="#">立即注册</a>

                            <span>|</span>

                            <a href="#">忘记密码?</a>

                        </div>

                    </div>

                    <div></div>

                    <div>

                        <div></div>

                        <p>其他方式登录</p>

                        <ul>

                            <li class="fa fa-qq"></li>

                            <li class="fa fa-weibo"></li>

                            <li class="fa fa-weixin"></li>

                            <li class="fa fa-twitter-square"></li>

                        </ul>

                    </div>

                </div>


                <div id="register_1" style="display: none;">

                    <img src="static/images/下载.png" alt="">

                    <p>使用 <span style="color: #ff6700;">小米商城APP</span> 扫一扫</p>

                    <p>小米手机可打开「设置」>「小米帐号」扫码登录</p>

                </div>

            </div>

        </div>

    </div>

    <div></div>

    <!-- 底部 -->

    <div>

        <p>简体<span>|</span>繁体<span>|</span>English<span>|</span>常见问题<span>|</span> 隐私政策</p>

        <p>小米公司版权所有-京ICP备10046444- <img src="static/images/ghs.png" alt=""> 京公网安备11010802020134号-京ICP证110507号</p>

    </div>


    <script>

        function ChangReg(divId,divName,Count){

            for(var i=0;i<=Count;i++){

                document.getElementById(divName+i).style.display = 'none';

            }

            document.getElementById(divName+divId).style.display = 'block';

            if(divId == 0){

                document.getElementById('regTabs_0').style.color = '#ff6a00';

                document.getElementById('regTabs_1').style.color = '#757575';

            }

            if(divId == 1){

                document.getElementById('regTabs_1').style.color = '#ff6a00';

                document.getElementById('regTabs_0').style.color = '#757575';

            }

        }

    </script>

</body>

</html>


css部分:

/*公共样式*/

*{

  padding:0;

  margin:0;

}

a{

  text-decoration: none;

  cursor:pointer;

  color:#373737;

}

li{

  list-style:none;

}

.clear{

  clear: both;

}

/*头部样式*/

.header{

  width: 1226px;

  height: 100px;

  margin:0 auto;

}

.header img{margin:25px;}

/*主体样式*/

.container{

  width: 100%;

  height: 580px;

  background-color:#e0e4f0;

}

.container .bg{

  width: 1226px;

  height:580px;

  margin:0 auto;

  overflow: hidden;

  background: url(../images/login.png);

  background-repeat: no-repeat;

  background-position:50%;

}

/*login*/

.container .bg .login{

  width:410px;

  height:520px;

  margin:30px 50px;

  background: #fff;

  box-shadow:0 0 1px 1px #ddd;

  float: right;

}

.login .short{

  width: 330px;

  height: 50px;

  padding: 25px 40px;

  font-size: 23px;

}

.login .short p,.login .short span{

  display: inline-block;

}

.login .short p{

  width: 150px;

  height: 50px;

  text-align: center;

  line-height: 50px;

  color: #757575;

}

.login .short span{

  margin:0 5px;

  line-height: 50px;

  color: #e0e0e0;

}

.login .content input{

  width: 330px;

  height: 50px;

  display: block;

  margin:15px auto;

  border:1px solid #e0e0e0;

  padding: 0 10px;

}

.login .content button{

  width:350px;

  height: 50px;

  display:block;

  margin:15px auto 0;

  border:none;

  background: #ff6700;

  color:#fff;

  font-size:18px;

  letter-spacing:2px;

}

.login .content .login_other{

  width: 330px;

  height: 50px;

  margin:0 auto;

  line-height:50px;

  font-size:14px;

}

.login .content .other_l{

  float:left;

}

.login .content .other_l a{

  color: #ff6700;

}

.login .content .other_r{

  float:right;

}

.login .content .other_r a{

  color: #ccc;

}

.login .content .other_r a:hover{

  color: #ff6700;

}

.login .content .other_r span{

  color: #ccc;

  margin:0 10px;

}


.login .content .login_social{

  width: 350px;

  height: 100px;

  margin:80px auto 0;

  text-align: center;

}

.login .content .login_social .hr{

  width: 350px;

  height: 1px;

  margin:0 auto;

  background: #ccc;

}

.login .content .login_social p{

  width: 100px;

  height:30px;

  line-height:30px;

  margin:-15px auto 0; 

  background: #fff;

  color: #ccc;

  font-size: 14px;

}

.login .content .login_social li{

  width: 32px;

  height:32px;

  line-height:30px;

  background: #333;

  color: #fff;

  font-size:16px;

  border-radius: 50%;

  margin:10px 10px;

}

.login .content .login_social .fa-qq:hover{

  background: #0288d1;

}

.login .content .login_social .fa-weibo:hover{

  background: #d32f2f;

}

.login .content .login_social .fa-weixin:hover{

  background: #00d20d;

}

.login .content .login_social .fa-twitter-square:hover{

  background: #0ae;

}


.login .content2{

  width: 350px;

  margin:50px auto 0;

  text-align: center;

  font-size: 14px;

  font-family: Helvetica;

}

.login .content2 img{

  margin-bottom:20PX;

}

.login .content2 p{

  margin-top:5PX;

}

/*底部样式*/

.footer{

  width: 1226px;

  padding:40px 0;

  margin:0 auto;

}

.footer p{

  font-size: 14px;

  text-align: center;

  height: 40px;

  line-height: 40px;

  color: #888;

}

.footer p span{margin:0 16px;}



批改老师:Peter-Zhu批改时间:2019-09-29 19:33:09
老师总结:看到了, 鼠标手势加上就好了

发布手记

热门词条

第九期线上培训班