效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习：小米搜索框案例（焦点事件）</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}.box {margin: 50px auto;width: 223px;}.box input {padding: 0 10px;width: 223px;height: 48px;border: 1px solid #e0e0e0;/* 去除元素在获得焦点时显示的轮廓线，否则看不出获得焦点时的橙色边框线效果 */outline: none;}/* 获得焦点 */.box input:focus {border: 1px solid #ff6700;}.box ul {display: none;border: 1px solid #ff6700;border-top: none;}.box ul li a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.box ul li a:hover {background-color: #eeeeee;}</style>
</head><body><div class="box"><input type="search" placeholder="小米11"><ul><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>const input = document.querySelector(".box input")const ul = document.querySelector(".box ul")// 获得焦点input.addEventListener("focus", () => {ul.style.display = "block"})// 失去焦点input.addEventListener("blur", () => {ul.style.display = "none"})</script>
</body></html>
![QT 与 C++实现基于[ TCP ]的聊天室界面](https://i-blog.csdnimg.cn/direct/09f879b1b195443f8f1ff0d41fbc5919.png)
