頂部導(dǎo)航之網(wǎng)站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

添加導(dǎo)航菜單

    <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="#">首頁(yè)</a>
                    </li>
                    <li>
                        <a href="#">開(kāi)源庫(kù)</a>
                    </li>
                    <li>
                        <a href="#">標(biāo)簽</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

image

導(dǎo)航欄右側(cè)登錄注冊(cè)按鈕

   <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="#">首頁(yè)</a>
                    </li>
                    <li>
                        <a href="#">開(kāi)源庫(kù)</a>
                    </li>
                    <li>
                        <a href="#">標(biāo)簽</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="#">免費(fèi)注冊(cè)</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="#">首頁(yè)</a>
                    </li>
                    <li>
                        <a href="#">開(kāi)源庫(kù)</a>
                    </li>
                    <li>
                        <a href="#">標(biāo)簽</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="#">免費(fèi)注冊(cè)</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