大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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; }
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166587.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...