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

效果：

说明：

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

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

HTMLCSS——CSS中设定背景图片无法显示的解决办法
问题描述: 当前 .html 文件和 image 文件夹在同一目录下,均为当前项目根目录. 用如下代码在HTML中设定CSS样式,背景图片无法显示.  < ...
android打开小屏登录画面,Android炫酷登录界面
来看一波图片吧 CoverEyeLogin.gif 动画效果介绍 1.当用户输入用户名时,小猫头鹰的眼睛是没有被捂住的 2.当用户输入密码时,小猫头鹰会用手捂住眼睛 3.如果用户名和密码都已经输入完毕 ...
炫酷登录界面（html+css）
背景图片摘自网络图片,请勿商用 html部分: <template><div class="container"><div class="l ...
如何在vscode中设置一个狂炫酷霸吊炸天的背景图片
1.首先在vscode的左边栏扩展(快捷键Ctrl+shift+x)中,找到 background 这个插件,就是下图1这个萌妹纸图标的插件: 图1 仙人指路:遇到一些陌生的插件,细读它的细节.功能贡 ...
【HTMLCSS】CSS当中设置背景图片不显示的问题
HTML和别的语言还不一样,出错的时候,页面显示不理想的时候,你都不知道自己错在哪里了. 常错问题:插入图片我喜欢用img标签和background当中的url属性,可是图片常常不显示. 问题一:ur ...
java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
一:源码获取这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面,这里我将源码资源分享给大家,大家可以直接免费下载使用哦,没有 vip 的小伙伴找我私聊发送"登录注册"即 ...
ps cc 生成html,Adobe Photoshop CC 2017制作炫酷的UI界面
最近有网友向小编咨询UI界面的制作方法,小编今天给小伙伴们分享一个Adobe Photoshop CC 2017超级酷炫的<UI设计小教程>,让我们一起来打造一枚流光质感界面吧~.感兴趣的 ...
HTML+CSS+JS制作炫酷【烟花特效】
文章目录制作炫酷烟花特效一.普通烟花(分散形) HTML代码 CSS代码 JS代码二.圆形烟花 HTML代码 CSS代码 JS代码三.爱心形烟花 HTML代码 CSS代码 JS代码四.源码获 ...

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

效果：

说明：

步骤

1.搭建HTML骨架

2.CSS布局样式

3.JS完成交互

源码下载

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

最新文章

热门文章