HTML/CSS实现小米官网搜索框效果

效果图：

需求分析：

1、输入框焦点事件

onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容。

onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容。

2、获取元素

3、注册事件

2.1、onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容

1)、显示ul

2)、自身边框改变（通过新增search类名）

2.2、onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容

1)、隐藏ul

2)、自身边框改变（通过移除search类名）

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;transition: all 0.3s;}.mi .search {border: 1px solid #ff6700;}.result-list {display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style>
</head><body>
<div class="mi"><input type="search" placeholder="红米手机" /><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">红米手机</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">云米空调</a></li><li><a href="#">云米智能机器人</a></li></ul>
</div><script>/*1.输入框焦点事件onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容2.小米官网成为焦点： (1)显示ul  (2)自身边框改变 （通过新增search类名）失去焦点： (1)隐藏ul  (2)自身边框改变 （通过移除search类名）3. this关键字 ： 环境对象。 常用于函数中，代表当前函数的所属环境。说人话： 相当于中文的 ‘我’ 字, 谁说的这个字，就代表谁4.js中this规则： 谁调用这个函数，this就指向谁* 事件处理函数中this一般指向事件源自身*///1.获取元素let input = document.querySelector('input')let ul = document.querySelector('.result-list')//2.注册事件//2.1 onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容input.onfocus = function(){console.log('你点我了，我出现光标了，此时可以输入文字')//(1)显示ulul.style.display = 'block'//(2)自身边框改变 （通过新增search类名）this.classList.add('search')}//2.2 onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容input.onblur = function(){console.log('你点其他地方了，我光标消失了，此时不可以输入文字')//(1)隐藏ulul.style.display = 'none'//(2)自身边框改变 （通过移除search类名）this.classList.remove('search')}</script>
</body>
</html>

HTML/CSS实现小米官网搜索框效果相关推荐

html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
Outline，Input样式的设置，小米官网搜索框
在做小米项目右上角的搜索框的时候,发现了该问题,现总结如下: outline outline和border类似,只不过outline不占用空间,而border占用空间 #box1{width: 300 ...
小米官网搜索框部分详解
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
css:动画小米官网盒子阴影心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
HTML+CSS实现小米官网顶部导航栏
效果图效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信.评论效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...

HTML/CSS实现小米官网搜索框效果

效果图：

源码如下：

HTML/CSS实现小米官网搜索框效果相关推荐

最新文章

热门文章