一、导航菜单_苹果cms什么导航菜单

一、导航菜单_苹果cms什么导航菜单一、导航菜单即页面样式,组成很简单,即一个文本输入框<input>和一个搜索图标,这里图标可以自行搜索下载一个,或者像下面一样使用在线图标,全部代码如下:先在<header&gt

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一、导航菜单

一、导航菜单_苹果cms什么导航菜单

 

 

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账号...

(0)
blank

相关推荐

  • docker访问宿主机_docker容器获取宿主机ip

    docker访问宿主机_docker容器获取宿主机ip前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程我们需要让宿主机的mysql允许远程接入。需要授权,不同版本的mysql授权语句不一样,这个在之前讲过。如下是mysql8.0之前版本的授权语句:GRANTALLPRIVILEGESON*.*TO’root’@’%’IDENTIFIEDBY’root’WITHGRANTOPTION;docker安装的mysql走网桥网络,这样docker容器的mysql就能跟宿主机同一个网络

  • ubuntu 20.04 安装中文输入法_ubuntu20.04安装中文输入法

    ubuntu 20.04 安装中文输入法_ubuntu20.04安装中文输入法在安装ubuntu时,如果选择英文安装,默认会不启用中文输入法的。可以通过下述方法开启:在settings的Region&amp;amp;amp;amp;amp;amp;Language的InputSources设置栏中点击+添加Chinese(IntelligentPinyin)最后,重启后使之生效。…

  • java判断一个数是否为质数的代码_逻辑代数最小项

    java判断一个数是否为质数的代码_逻辑代数最小项给定一个长度为 N 的数列 A,以及 M 条指令,每条指令可能是以下两种之一:C l r d,表示把 A[l],A[l+1],…,A[r] 都加上 d。Q l r,表示询问数列中第 l∼r 个数的和。对于每个询问,输出一个整数表示答案。输入格式第一行两个整数 N,M。第二行 N 个整数 A[i]。接下来 M 行表示 M 条指令,每条指令的格式如题目描述所示。输出格式对于每个询问,输出一个整数表示答案。每个答案占一行。数据范围1≤N,M≤105,|d|≤10000,|A[i]|≤1

  • Ubuntu 设置 WIFI 热点

    Ubuntu 设置 WIFI 热点

  • 如何创建HTML表单?html表单代码怎么写[通俗易懂]

    如何创建HTML表单?html表单代码怎么写[通俗易懂]html表单代码是什么?如何创建HTML表单?这些对于新手会感到陌生,下面我们为你总结一下html表单代码怎么写?以及html表单的创建?一:构建表单标签在文本编辑器中打开HTML文档,必须在<form>和</form>标签中键入HTML表单的内容。这些标签充当表单的容器,就像<div></div>容器标签一样。您可以在<form></form>标签内使用CSS或js,使您的表单看起来比较美观。2.打开<form&gt

  • 软件激活成功教程工具包_激活成功教程软件网站哪个好

    软件激活成功教程工具包_激活成功教程软件网站哪个好影响共享软件发展的因素很多,被非法激活成功教程可以说是共享软件的头号大敌。那么造成共享软件生存困难的cracker们到底用了那些武器呢?今天就让我让带您去看看神秘的cracker常用的十类软件,它们就是共享软件的十大杀手!  一.调试类工具soft-ice和trw2000。下载:TRW2000V1.22  soft-ice是目前公认最好的跟踪调试工具。使用soft-ice

    2022年10月13日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号