仿掘金项目顶部导航

顶部导航之网站logo

   <header>
        <div class="uk-container uk-container-center">
            <nav class="uk-navbar">
                <a class="uk-navbar-brand" href="#" title="掘金">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金" width="60" height="60">
                </a>
            </nav>
        </div>
    </header>

image

添加导航菜单

    <header>
        <div class="uk-container uk-container-center">
            <nav class="uk-navbar">
                <a class="uk-navbar-brand" href="#" title="掘金">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金" width="60" height="60">
                </a>
                <ul class="uk-navbar-nav">
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">开源库</a>
                    </li>
                    <li>
                        <a href="#">标签</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

image

导航栏右侧登录注册按钮

   <header>
        <div class="uk-container uk-container-center">
            <nav class="uk-navbar">
                <a class="uk-navbar-brand" href="#" title="掘金">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金" width="60" height="60">
                </a>
                <ul class="uk-navbar-nav">
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">开源库</a>
                    </li>
                    <li>
                        <a href="#">标签</a>
                    </li>
                </ul>

                <div class="uk-navbar-content uk-navbar-flip">
                    <div class="uk-button-group">
                        <a class="uk-button uk-button-primary uk-margin-right" href="#">免费注册</a>
                        <a class="uk-button uk-button-primary" href="#">立即登录</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

image

头部美化

 <header id="app-header">
        <div class="uk-container uk-container-center">
            <nav class="uk-navbar app-nav">
                <a class="uk-navbar-brand" href="#" title="掘金">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金" width="60" height="60">
                </a>
                <ul class="uk-navbar-nav">
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">开源库</a>
                    </li>
                    <li>
                        <a href="#">标签</a>
                    </li>
                </ul>

                <div class="uk-navbar-content uk-navbar-flip">
                    <div class="uk-button-group">
                        <a class="uk-button uk-button-primary uk-margin-right" href="#">免费注册</a>
                        <a class="uk-button uk-button-primary" href="#">立即登录</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

自定义样式

 #app-header {
              background: #fff;
              height: 58px;
              border-bottom: 1px solid #ccc;
              width: 100%;
              position: fixed;
              z-index: 999999;
              top:0px;
          }
          .app-nav
          {
              background: 0;
              border: 0;
          }

          #app-header .uk-navbar-brand, #app-header .uk-navbar-content{
              height: 58px;
          }

          #app-header .uk-navbar-nav > li > a {
              height: 58px;
              line-height: 58px;
              font-family: "Microsoft Yahei";
              font-size: 16px;
              padding: 0 11px;
          }

image.png