返回商城页面登录...登陆

商城页面登录

关志宇2019-07-01 11:38:12311

login.css

*{margin:0px; padding:0px;}

li{list-style: none;}

a{text-decoration: none;color: #ccc;cursor:pointer;}

.clear{clear: both;}


.header{width:1226px;height:100px;margin: 0px auto;line-height: 90px;}

.content{width: 100%;height:580px;background: url(../image/login.png);}

p{width:1226px;height: 30px;margin:0px auto;line-height:30px;text-align:center;color:#757575;}

span{font-size: 13px;margin:0px 10px;}


.login_content{width: 1226px;height: 520px;margin:0px auto;}

.login_form{width:410px;height: 520px;float: right;background: #fff;margin: 30px 50px; }

.login_form_main{width: 330px;margin:25px auto;}

.login_form_main p{font-size:23px;text-align: center;float:left;color: #757575;width:150px;height:50px;line-height: 50px;}

.login_form_main span{font-size: 30px;float:left;height:50px;line-height:50px;color: #e0e0e0;}


.login_form_content{margin-top:25px;}

input{border:none;width:328px;height:28px;padding:11px;margin:15px auto;border:1px solid #e0e0e0;display:block;}

button{border: none;width:350px;display:block;height:50px;margin: 25px auto 0px;background:#ff6700;color:#fff;}

.login_form_content h6{font-weight:300;width:350px;margin:0px auto;height:40px;line-height:40px;text-align:center;}

.login_form_content span{float:left;}



.login_form_pic{width:350px;margin:100px auto;border-top:1px solid #e0e0e0;position:relative;}

.login_form_pic p{width:100px;height:30px;line-height:30px;color:#ccc;background:#fff; position:absolute; top:-15px;left:135px;}

.login_form_pic ul{width:235px;margin:20px auto 0px;}

.login_form_pic ul li {float:left;width:32px;height:32px;line-height:32px;border-radius:16px;color:#fff;background:#ccc;text-align:center;background:#6D6E6A;}

.pic_1:hover{background:#ff6700;}

.pic_2:hover{background:#0288d1;}

.pic_3:hover{background:#025500;}

.pic_4:hover{background:#4411ff;}

.login_form_pic ul li i{font-size:17px;}

.login_form_content0{width:350px;margin:0px auto;text-align:center;}


.login_form_content0 img{width:180px;height:190px; margin:70px auto 15px;text-align:center;}

.login_form_content0 p{width:350px;margin:0px auto;line-height:20px;height:20px;}



login.html


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>小米导航登录</title>

<link rel="stylesheet" type="text-css" >

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

<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">

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

<script type="text/javascript" src="static/layui/layui.js"></script>

</head>

<body>

<div class="header">

<a href="./index.html"><img src="static/image/sb.png"></a>

</div>

<div class="content">

<div class="login_content">

<div class="login_form">

<div class="login_form_main">

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

<span>|</span>

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

</div>

<div class="clear"></div>

<div class="login_form_content" id="register_0">

<form>

<input type="text" name="username"/>

<input type="text" name="password"/>

<button>登录</button>

</form>

<h6><a href="" style="color: #ff6700;">手机短息登录/注册</a>&nbsp; | &nbsp;<a href="">忘记密码</a></h6>

<div class="login_form_pic">

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

<ul>

<li class="pic_1" style="margin-right:35px;"><i class="fa fa-qq"></i></li>

<li class="pic_2" style="margin-right:35px;"><i class="fa fa-weibo"></i></li>

<li class="pic_3" style="margin-right:35px;"><i class="fa fa-twitter-square"></i></li>

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

</ul>

</div>

</div>

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

                    <img src="static/image/index_1.png">

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

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

                </div>

</div>

</div>

</div>

<div class="footer">

<p style="margin-top:60px;">简体<span>|</span>繁体<span>|</span>常见问题<span>|</span>隐私政策</p>

<p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>

</div>


    <script type="text/javascript">

        function ChangeReg(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('regaTbs_0').style.color='#ff6a00';

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

            }

            if(divId==1){

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

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

            }

        }

    </script>

</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网