LOGO搜索热线主菜单

发布单位:弘帝企业智能建站系统演示学习代码 发布人:张鑫鑫 发布时间:2021/2/10 23:40:27 关注度:706

DEMO:hosp

HTML:创建top.zhg,复制下面代码,用$frame_top调用即可


<div class="py-3 py-lg-5">
    <div class="container">
        <div class="row">
            <div class="logo col-lg-4 col-9">$show_logo$</div>
            <div class="d-none d-lg-flex col-lg-8 align-items-center">
                <div class="col-5 offset-2 search text-center">$func-search(para=Search,table=1)$</div>
                <div class="col-5 text-right phone">$func-contact(show=hotline)$</div>
            </div>
        </div>
    </div>
</div>
<div class="container bg-fst">
    <div class="menu row white li-hover-sec on-white hover-white d-none d-lg-block" id="navbar">
        $func-menu(pos=0,divi=none)$</div>
</div>
<navbar-toggler class="fixed-top w-100 text-right" btn="bg-fst m-3 white d-inline-block d-lg-none" tar="navbar"
    menu="bg-fst px-0 fst white hover-white ul-li-2 text-center" show="false"></navbar-toggler>
CSS:



.logo {
  display: flex;
  min-height: 28px;
  align-items: center;
}

.logo img {
  max-width: 100%;
  max-height: 50px !important;
}

.search {
  .Margin {
    border: 2px solid $fst;
    border-radius: 20px;

    select {
      display: none;
    }

    &::after {
      position: absolute;
      display: inline-flex;
      right: 40px;
      top: 3px;
      width: 20px;
      height: 20px;
      content: "\f002";
      font-size: 26px;
      color: $fst;
      z-index: -100;
    }

    input,
    form {
      border: 0;
    }

    [type=submit] {
      width: 30px;
      padding-left: 0;
      padding-right: 0;
      background: transparent;

    }
  }
}

.phone {
  * {
    color: $fst;
  }

  .Margin .Hotline {
    &::before {
      font-size: 50px;
      line-height: 1em;
      margin: 0;
    }

    .dd {
      font-size: 28px;
    }
  }
}



顶部文件一般为top.zhg,版块是由多个组件包括HTML+Bootstrap+弘帝框架实现,所有示范均是经过真实案例摘抄,使用时只需复制粘贴,适当调整颜色、大小、背景等CSS,约几分钟完成设计。