005_HTML製作炫酷登入介面（CSS精靈圖、背景圖片區域性顯示）

weixin_34075551發表於2017-10-03
HTMLCSS

效果：

<center>


8244809-040e37376f9178ff
這裡寫圖片描述

</center>

說明：

  • 輸入框由三部分組成：

    • 裝區域性圖示的span
    • 顯示提示文字的span
    • 接受使用者輸入的input

  • 互動效果

    • 剛開啟頁面，所有輸入框顯示提示文字
    • 當input獲得焦點，提示文字消失
    • 當input失去焦點，並且使用者沒有輸入內容，再次顯示提示文字

步驟

1.搭建HTML骨架
2.CSS佈局樣式
3.JS完成互動

1.搭建HTML骨架

<body>
    <div class="adClass">
    </div>
    
    <form action="" method="post" id="reForm">
        <div class="inputClass">
            <!-- 用來顯示提示資訊 -->
            <span>使用者名稱</span>
            <!-- 用來接受使用者輸入 -->
            <input type="text" name="username"/>
            <!-- 用來放圖示的 -->
            <span class="userSpan"></span>
        </div>          
        
        <div class="inputClass">
            <span>密碼</span>
            <input type="text" name="password"/>
            <span class="passwordSpan"></span>
        </div>  
        
        <div class="inputClass">
            <span>郵箱</span>
            <input type="text" name="email"/>
            <span class="emailSpan"></span>
        </div>  
        
        <div class="inputClass">
            <span>電話</span>
            <input type="text" name="phone"/>
            <span class="phoneSpan"></span>
        </div>      
        
        <div class="inputClass">
            <span>身份證號</span>
            <input type="text" name="identity"/>
            <span class="identitySpan"></span>
        </div>      
        
        <!-- 註冊按鈕 -->           
        <div class="reClass">
            <a href="#">註冊</a>
        </div>  
    </form>
    
</body>

2.CSS佈局樣式

重點是學會精靈圖的使用，背景圖示的定位：background-position屬性。

.inputClass {
    position: relative;
    height: 40px;
    width: 400px;
    font-size: 15px;
    border: 1px solid;
    border-radius: 20px;
    margin: auto;
    color: darkgray;
}

input {
    position: absolute;
    font-size: 15px;
    padding-left: 10px;
    width: 80%;
    height: 70%;
    left: 43px;
    top: 5px;
    /*取消有焦點時候的預設邊框*/
    outline: none;
    /*取消預設背景*/
    background: none;
    /*取消預設邊框*/
    border: 0px;
    
}

body {
    text-align: center;
    background-color: #F0FFFF;
}


/*精靈圖*/
.userSpan {
    /*1.匯入背景圖*/
    background-image: url(../img/login_ico.png);
    position: absolute;
    left: 20px;
    top: 8px;
    /*設定背景所在的容器的大小*/
    width: 25px;
    height: 25px;
    /*設定背景的起始位置*/
    /*
     * 注意：
     *      取影象右邊的內容，座標 0 - x
     *      取影象下邊的內容，座標 0 - y
     *      
    ️ */
    background-position: -125px 0px;
}

/*精靈圖*/
.passwordSpan {
    /*1.匯入背景圖*/
    background-image: url(../img/login_ico.png);
    position: absolute;
    left: 20px;
    top: 8px;
    /*設定背景所在的容器的大小*/
    width: 25px;
    height: 25px;
    /*設定背景的起始位置*/
    /*
     * 注意：
     *      取影象右邊的內容，座標 0 - x
     *      取影象下邊的內容，座標 0 - y
     *      
    ️ */
    background-position: -125px -34px;
}       

/*精靈圖*/
.emailSpan {
    /*1.匯入背景圖*/
    background-image: url(../img/login_ico.png);
    position: absolute;
    left: 20px;
    top: 8px;
    /*設定背景所在的容器的大小*/
    width: 25px;
    height: 25px;
    /*設定背景的起始位置*/
    /*
     * 注意：
     *      取影象右邊的內容，座標 0 - x
     *      取影象下邊的內容，座標 0 - y
     *      
    ️ */
    background-position: -85px 0px;
}   

/*精靈圖*/
.phoneSpan {
    /*1.匯入背景圖*/
    background-image: url(../img/login_ico.png);
    position: absolute;
    left: 20px;
    top: 8px;
    /*設定背景所在的容器的大小*/
    width: 25px;
    height: 25px;
    /*設定背景的起始位置*/
    /*
     * 注意：
     *      取影象右邊的內容，座標 0 - x
     *      取影象下邊的內容，座標 0 - y
     *      
    ️ */
    background-position: -85px -115px;
}               

/*精靈圖*/
.identitySpan {
    /*1.匯入背景圖*/
    background-image: url(../img/login_ico.png);
    position: absolute;
    left: 20px;
    top: 8px;
    /*設定背景所在的容器的大小*/
    width: 25px;
    height: 25px;
    /*設定背景的起始位置*/
    /*
     * 注意（容器不變，資料是圖片移動的方向和大小）：
     *      取影象右邊的內容，座標 0 - x
     *      取影象下邊的內容，座標 0 - y
     *      
    ️ */
    background-position: -85px -32px;
}   
        
.inputClass span:first-child {
    position: absolute;
    font-size: 15px;
    top: 9px;
    left:43px;
    padding-left: 10px;
}

.reClass {
    position: relative;
    background-color: rgb(0,255,255);
    width: 250px;
    margin: auto;
    height: 60px;
    border-radius: 40px;
}
.reClass a {
    /*去除下劃線*/
    text-decoration: none;
    color: white;
    font-size: 30px;
    line-height: 60px;
}

.adClass {
    position: relative;
    background-image: url(../img/logo.png);
    width: 620px;
    height: 114px;
    margin-top: 20px;
    margin: auto;
}

3.JS完成互動

主要是完成：

  • input獲得焦點，隱藏提示資訊
  • input失去焦點，判斷使用者是否輸入了有效內容，有的話，就不再顯示提示資訊，否則就顯示
<script type="text/javascript">
    $(function() {
        //input獲得焦點，隱藏提示資訊
        $("input").focus(function() {
            $(this).prev("span").hide(200)
        });
        
        //input失去焦點，判斷使用者的輸入資訊是否有效，再決定是否顯示提示資訊
        $("input").blur(function() {
            if( $(this).val().trim() == "" ) {
                $(this).prev("span").show(200)
            }
        });
        
        //調整輸入框之間的間距
        var countInput = $(".inputClass").length;
          $(".inputClass").css({
            "margin-top": 100.0 / countInput / 8 + "%",
            "margin-bottom": 100.0 / countInput / 8 + "%"
         });
                    
    });
</script>

效果和原始碼下載

https://mp.weixin.qq.com/s/N0w7m9005k8WsTpT5-uaeg

歡迎加入討論群：451826376

<center>


8244809-c0b77e1e60319e46

</center>

相關文章