html - NavBar Logo 未出现在 Foundation 6 dist 上

标签 html css zurb-foundation zurb-foundation-6

基础 6:NavBar Logo 在我的机器上本地工作,但当我上传到服务器时它不会出现。网站:www.adolfobarreto.atwebpages.com

我已经搜索过代码,没有发现任何错误。有什么想法吗?

谢谢阿道夫

HTML:

    <!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="assets/css/app.css">
  </head>
  <body>

    <!-- Small Navigation -->
    <div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
        <a class="logo-small show-for-small-only" href="#"><img src="\assets\img\fingerLogoXS.gif" /></a>
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
    </div>
    <!-- Medium-Up Navigation -->
    <nav class="top-bar" id="nav-menu">
        <div class="logo-wrapper hide-for-small-only">
            <div class="logo">
                <img src="\assets\img\fingerLogosm.gif">
            </div>
        </div>
        <!-- Left Nav Section -->
        <div class="top-bar-left">
            <ul class="vertical medium-horizontal menu">
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
            </ul>
        </div>

        <!-- Right Nav Section -->
        <div class="top-bar-right">
            <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
                <li class="has-submenu">
                    <a href="#">Menu 4</a>
                    <ul class="submenu menu vertical medium-horizontal" data-submenu>
                        <li><a href="#">First link in dropdown</a></li>
                    </ul>
                </li>
                <li class="has-submenu">
                    <a href="#">Menu 5</a>
                    <ul class="submenu menu vertical" data-submenu>
                        <li><a href="#">First link in dropdown</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <!--End Main Navigation-->
    <br />
    <br />
    <div class="row">
        <div class="medium-4 columns">
            <img src="http://placehold.it/450x183&text=LOGO" alt="company logo">
        </div>
        <div class="medium-8 columns">
            <img src="http://placehold.it/900x175&text=Responsive Ads - ZURB Playground/333" alt="advertisement for deep fried Twinkies">
        </div>
    </div>
    </header>
    <br>
    <div class="row">
        <div class="medium-8 columns">
            <p><img src="\assets\img\finger.jpg" alt="main article image"></p>
        </div>
        <div class="medium-4 columns">
            <p><img src="\assets\img\seo2.gif" alt="article promo image" alt="advertisement for deep fried Twinkies"></p>
            <p><img src="\assets\img\responsive.jpg" alt="article promo image"></p>
        </div>
    </div>
    <hr>
    <footer>
        <div class="row expanded callout secondary">
            <div class="large-4 columns">
                <h4>Portfolio Images</h4>
                <div class="row small-up-4">
                    <div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
                    <div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
                    <div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
                    <div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
                    <div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
                    <div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
                    <div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
                    <div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
                </div>
            </div>
            <div class="large-4 columns">
                <h4>Mission</h4>
                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam a quam voluptates aliquam cum, quisquam
                    tempora sapiente minus, eos modi. Quia enim, doloremque deleniti. Voluptate nemo facilis, dignissimos temporibus.
                </P>
            </div>
            <div class="large-4 columns">
                <h4>Technologies</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique
                    molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi
                    aliquam.
                </p>
            </div>
        </div>
        </div>
        <div class="row">
            <div class="medium-6 large-6 columns">
                <ul class="menu align-left">
                    <li><a href="#">Legal</a></li>
                    <li><a href="#">Partner</a></li>
                    <li><a href="#">Explore</a></li>
                </ul>
            </div>
            <div class="medium-6 large-6 columns">
                <ul class="menu align-right">
                    <li class="menu-text">Copyright © 2016 Adolfo Barreto</li>
                </ul>
            </div>
        </div>
    </footer>

    <script src="assets/js/app.js"></script>
  </body>
</html>

SCSS:

 //Navigation
//__________


/* Small Navigation */
.logo-small {
  float: right;
}

.title-bar {
  padding: 0 .5rem;
}

.menu-icon,
.title-bar-title {
  position: relative;
  top: 10px;
}

/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) { 

  .logo-wrapper {
    position: relative;
  }

  .logo-wrapper .logo {
    width: 92px;
    height:  92px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: -6px;
    margin-left: -46px;
  }

  // Right part
  .top-bar-right {
    width: 50%;
    padding-left: 60px;
  }

  .top-bar-right ul {
    float:  left;
  }

  // Left part
  .top-bar-left {
    width:  50%;
    padding-right: 60px;
  }

  .top-bar-left ul {
    float:  right;
  } 
}

.menu-text {
    color: deepskyblue;
}

#footer-sep {
    padding: 1em;
}

最佳答案

您所有的图像路径都使用反斜杠而不是正斜杠。切勿在路径中使用反斜杠,无论它们是绝对路径、相对路径还是根相对路径。

顺便说一下,您网站的链接不起作用。

关于html - NavBar Logo 未出现在 Foundation 6 dist 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34619314/

相关文章:

html - 如何在 HTML 的选择(下拉)菜单中设置不可选择的默认描述?

css - XPages:IBM OneUI 与 Bootstrap

html - 我页面上的链接无效

html - Flickity 轮播图片不显示

css - 在列之间设置空间,因此每列大小相同(使用基础)

html - 可以使用 :hover with Foundation for Emails?

javascript - 级联遵守形式

javascript - 如何计算两个文本输入之间的日期差异?

javascript - Phonegap 应用程序 SQLite 数据库初始设置

html - 边框与框对齐