本文将逐步教你如何创建一个类似百度搜索框的下拉效果。通过使用`<input>`控件和CSS，当用户输入内容时，下拉列表显示最多10个联想词。HTML部分主要包含输入框和用于显示联想词的10个`<div>`（以表格形式展示），并实现了鼠标悬停时的颜色变化。
最终效果(chrome 下)： 搜索框下拉 demo
今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果。
1、html 以及 css 部分
首先你得要有个输入框，这里我用了 控件，其次当用户在输入框中输入内容后，下拉效果随即出现，比如在我的代码中最多会出现 10 个联想词，那么就得写 10 个 div(来显示这些词)，这里我用了 table 元素，这里注意 table 中的 td 元素还得有个 hover 后变色的效果。html 和 css 部分相对来说还是比较简单的，直接看代码。
html 部分：
| td>tr> |
| td>tr> |
| td>tr> |
| td>tr> |
| td>tr> |
| td>tr> |
| td>tr> |
| td>tr> |
| td>tr> |
| td>tr> tbody> table> css 部分: height:24px; width:535px; font-size:20px; } table { font-family:'微软雅黑', '宋体', '黑体'; } td { background-color:rgb(249 |
最低0.47元/天 解锁文章
4544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
