效果：
说明：
输入框由三部分组成：
装局部图标的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./s/N0w7m9005k8WsTpT5-uaeg
欢迎加入讨论群：451826376
