大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
一、导航菜单
HTML部分
即页面样式，组成很简单，即一个文本输入框<input>和一个搜索图标，这里图标可以自行搜索下载一个，或者像下面一样使用在线图标，全部代码如下：
先在<header></header>内部添加以下代码，使用在线图标：
<link href="https://fonts.proxy.ustclug.org/icon?family=Material+Icons" rel="stylesheet">
然后在网页内需要添加搜索栏的合适位置添加以下代码，一般放在顶部导航栏：
<div class="search"> <i class="material-icons search-icon search-start">search</i> <input type="text" class="search-input" placeholder="Searching..." /> <i class="material-icons search-icon search-clear">clear</i> <div class="search-results"></div> </div>
上面的clear是一个清除输入框内容的图标，search-results是用于输出匹配到的结果的板块；
CSS部分
然后来看一下CSS样式代码，仅供参考：
.search { position: relative; height: 30px; text-align: right; line-height: 30px; padding-right: 10px; } .search .search-icon { float: right; height: 100%; margin: 0 10px; line-height: 30px; cursor: pointer; user-select: none; } .search .search-input { float: right; width: 30%; height: 30px; line-height: 30px; margin: 0; border: 2px solid #ddd; border-radius: 10px; box-sizing: border-box; } .search .search-clear { display: none; } .search .search-results { display: block; z-index: 1000; position: absolute; top: 30px; right: 50px; width: 50%; max-height: 400px; overflow: auto; text-align: left; border-radius: 5px; background: #ccc; box-shadow: 0 .3rem .5rem #333; } .search .search-results .result-item { background: aqua; color: #000; margin: 5px; padding: 3px; border-radius: 3px; cursor: pointer; }
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/166587.html原文链接：https://javaforall.net
