005_HTML制作炫酷登录界面（CSS精灵图、背景图片局部显示）

最新推荐文章于 2024-06-02 11:25:18 发布

_枸杞子_

最新推荐文章于 2024-06-02 11:25:18 发布

阅读量7.8k

点赞数 9

分类专栏： HTML_CSS积累版文章标签： css html CSS精灵图图片合成炫酷登录界面

本文链接：https://blog.csdn.net/qq_33605778/article/details/78148077

版权

HTML_CSS积累版专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果：

说明：

输入框由三部分组成：
- 装局部图标的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

_枸杞子_

关注

9
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
005_HTML制作炫酷登录界面（CSS精灵图、背景图片局部显示）

效果：说明：输入框由三部分组成：装局部图标的span显示提示文字的span接受用户输入的input交互效果刚打开页面，所有输入框显示提示文字当input获得焦点，提示文字消失当input失去焦点，并且用户没有输入内容，再次显示提示文字步骤1.搭建HTML骨架 2.CSS布局样式 3.JS完成交互1.搭建HTML骨架<body> <div class="adClass
复制链接

扫一扫

专栏目录