亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

模仿商城登錄頁面

原創(chuàng) 2019-04-20 17:31:46 243
摘要:<!DOCTYPE html><html><head>    <title>點點商城-登錄</title><meta charset="utf-8"><link rel="shortcut icon" type="image/x-i

<!DOCTYPE html>

<html>

<head>

    <title>點點商城-登錄</title>

<meta charset="utf-8">

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

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

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

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

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


<style>

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

.clear{clear: both;}

li{list-style: none;}

.atop{text-decoration: none;color: red ;font-size: 25px;cursor:pointer;}

.header1{width: 100%;height: 100px;background-color: #ccc; }

.header{width: 1176px;height:100px;margin: 0px auto;line-height:90px;padding-left: 20px;background-color: #ccc; }

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

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

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


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

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


/*登錄框*/

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

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

.login_form_main p:hover{color:red;}

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

input{border: none;width: 328px;display: block;height:28px;margin: 15px auto;padding: 10px; }

input[name="username"]{border: 1px solid #E0E0E0;}

input[name="password"]{border: 1px solid #E0E0E0;}

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

.login_form h6{font-weight: 300;width: 350px;margin: 0px auto;height: 40px;line-height: 40px;}

.login_form h6 span{float: right;color: #ccc;}

.login_form h6 a{color: #ccc;}

.login_form h6 a:hover{color: red;}

.login_form_pic{border-top:1px solid #E0E0E0;width: 350px;margin: 0px auto; margin-top: 110px;position: relative;}

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

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

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

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

.login_form_pic1,.login_form_pic3{background:#747474;}

.login_form_pic2,.login_form_pic4{background:#4A4A4A;}

.login_form_pic1:hover{background:#0288D1; }

.login_form_pic2:hover{background:#D32F2F; }

.login_form_pic3:hover{background:#00AAEE; }

.login_form_pic4:hover{background:#00D20D; }

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

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

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

</style>




</head>

<body>

<div class="header1">

<div class="header">

<a class=atop href=" ./index.html"><img src="static/img/5.png">點點商城</a>

</div>

</div>

    <div class="content">

        <div class="login_content">

            <div class="login_form">

                <div class="login_form_main" style="margin-top:25px;">

                    <p id="regTabs_0" onclick="ChangeReg('0','register_',1)" style="color:red ">賬號登錄</p>

                    <span class="span">|</span>

                    <p id="regTabs_1" onclick="ChangeReg('1','register_',1)">掃碼登錄</p>

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

                </div>

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

                    <form>

                        <input type="text" name="username" placeholder="郵箱/手機號碼/小米ID">

                        <input type="text" name="password" placeholder="密碼">

                        <button>登錄</button>

                    </form>

                    <h6><a href="#" style="color: red;">手機短信登錄/注冊</a><span><a href="#">立即注冊</a> &nbsp;  |  &nbsp; <a href=""> 忘記密碼?</a></span></h6>

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

                    <div class="login_form_pic">

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

                        <ul>

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

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

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

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

                        </ul>

                    </div>

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

                </div>

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

                    <img src="static/img/下載.png">

                    <p>使用<span style="color:red; ">點點商城APP</span>掃一掃</p>

                    <p>點點手機可打開「設(shè)置」>「點點帳號」掃碼登錄</p>

                </div>    

            </div>

        </div>

    </div>

    <p style="margin-top: 60px;">簡體<span>|</span>繁體<span>|</span>English<span>|</span> 常見問題<span>|</span> 隱私政策</p>

    <p>點點公司版權(quán)所有-京ICP備10xxxxxxxx-<img src="static/img/ghs.png"> 京公網(wǎng)安備11010xxxxxxxxxxxx號-京ICP證1xxxxxx號</p>


<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("regTabs_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>


批改老師:西門大官人批改時間:2019-04-22 09:55:05
老師總結(jié):最好上傳一下程序運行效果圖,不要拷貝課件源碼。

發(fā)佈手記

熱門詞條