基础6:NavBar徽标在我的机器上本地工作,但是当我上传到服务器时它不会出现。网站:www.adolfobarreto.atwebpages.com
我搜索了代码,发现没有错误。任何想法?
感谢Adolfo
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;
}
答案 0 :(得分:1)
所有图像路径都使用反斜杠而不是正斜杠。不要在路径中使用反斜杠,无论它们是绝对路径,相对路径还是根路径。
BTW指向您网站的链接不起作用。