005_HTML制作炫酷登录界面（CSS精灵图、背景图片局部显示）
程序员文章站
2022-05-26 19:55:39
...
效果：
说明：
-
输入框由三部分组成：
- 装局部图标的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