1. 程式人生 > >web前端練習6----登入靜態頁面

web前端練習6----登入靜態頁面

效果圖:
在這裡插入圖片描述
原始碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!-- 適配手機-->
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .biaoti {
            /*彈性盒子*/
            display: flex;
            /*子元素水平均勻排列*/
            justify-content: space-between;
            /*豎直居中*/
            align-items: center;
            width: 100%;
            height: 45px;
            background-color: cornflowerblue;
            color: #fff;
            /*相對於視窗浮在最上面*/
            position: fixed;
            left: 0px;
            top: 0px;

        }

        .btImg {
            width: 18px;
            height: 18px;
            margin-left: 5px;
        }

        .btZhuCe {
            font-size: 12px;
            color: #fff;
            margin-right: 10px;
        }

        .image {
            width: 90px;
            height: 90px;
            /*設定為塊級元素*/
            display: block;
            /*水平居中*/
            margin: 0 auto;
            /*距離頂部65px*/
            margin-top: 85px;
        }

        .content {
            width: 257px;
            margin: 0 auto;
            margin-top: 65px;
        }

        .shuru {
            width: 257px;
            height: 45px;
            /*豎直居中*/
            /*彈性盒子*/
            display: flex;
            align-items: center;
            /*子佈局在父佈局的左右兩端*/
            justify-content: space-between;
            /*新增底邊框*/
            border-bottom: 1px #CCC solid;
            /*超出部分隱藏*/
            overflow: hidden;

        }

        .icon {
            width: 17px;
            height: 17px;
        }

        .shurukaung {
            width: 235px;
            height: 45px;
            /*去掉外邊線*/
            outline: none;
            /*去掉邊框*/
            border: none;
        }

        .denglu {
            width: 100%;
            border-radius: 5px;
            line-height: 45px;
            text-align: center;
            color: #fff;
            background-color: cornflowerblue;
            margin-top: 15px;
        }

        .tongyi {
            height: 30px;
            /*彈性盒子*/
            display: flex;
            /*子元素從左到右排列*/
            justify-content: flex-start;
            /*子元素豎直居中*/
            align-items: center;

        }

        .tongyibuju {
            height: 30px;
            /*彈性盒子*/
            display: flex;
            /*子元素從左到右排列*/
            justify-content: flex-start;
            /*子元素豎直居中*/
            align-items: center;

        }

        .tongyiImg {
            width: 15px;
            height: 15px;
        }

        .tongyiWenZi {
            margin-left: 5px;
        }

        .xieyi {
            color: cornflowerblue;
        }

        .kefu {
            width: 100%;
            line-height: 45px;
            text-align: center;
            margin-top: 90px;
            color: #999;
        }

    </style>
</head>
<body>
<div class="biaoti">
    <img class="btImg" src="img/back.png">
    <span>登入</span>
    <span class="btZhuCe">註冊</span>


</div>
<img class="image" src="img/linkgap_icon2.png">

<div class="content">
    <div class="shuru">
        <img class="icon" src="img/login_username.png">
        <input class="shurukaung" type="text" placeholder="使用者名稱">
    </div>
    <div class="shuru">
        <img class="icon" src="img/login_password.png">
        <input class="shurukaung" type="text" placeholder="密碼">
    </div>
    <div class="denglu">登入</div>
    <!-- 協議-->
    <div class="tongyi">
        <div onclick="onCheck();" class="tongyibuju">
            <img id="tongyiImg" class="tongyiImg" src="img/login_agree1.png">

            <div class="tongyiWenZi">同意</div>

        </div>

        <div class="xieyi">《服務協議》</div>
    </div>
</div>
<!-- 客服電話-->
<div class="kefu">客服電話:400-168-0808</div>
<script>
    var istrue = false;
    function onCheck() {
        var tongyiimg = document.getElementById("tongyiImg");
        if (istrue) {
            console.log("同意");
            tongyiimg.src = "img/login_agree1.png";
            istrue = false;
        } else {
            tongyiimg.src = "img/login_noagree.png";
            console.log("不同意");
            istrue = true;
        }
    }

</script>


</body>
</html>

原始碼下載
https://download.csdn.net/download/zhaihaohao1/10818970