1
Я использую Free Code Camp, чтобы узнать, а несколько дней назад добрался до Portfolio Project. Я добился больших успехов и немного научился, но я застрял на одном довольно важном бит. Мои фоновые изображения продолжают исчезать. Они исчезают в случайные времена. Я могу временно исправить это, переписав код (а не только скопировать/вставить код), но он всегда заканчивается снова.Фоновое изображение продолжает исчезать
Если вы не возражаете, пожалуйста, просмотрите мой код. Для быстрого поиска найдите aboutpage и portfoliopage (в HTML и CSS), чтобы увидеть конкретные экземпляры, о которых я говорю. Конечно, возможно, некоторые другие аспекты кода увязывают его. Это происходит с тех пор, как я добавил JavaScript.
HTML
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script> -->
<title>David Clark | Portfolio</title>
</head>
<!--<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">David Clark</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>-->
<body data-spy="scroll" data-target=".navbar" data-offset="0">
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="aboutpage">David Clark</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#aboutpage">About</a>
</li>
<li>
<a href="#portfoliopage">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="aboutpage">
<article>
<div class="block text-center">
<img class="portrait" src="https://avatars0.githubusercontent.com/u/15970036?v=3&s=460">
<h1>david clark</h1>
<div class="btnList">
<a class="btn btn-social-icon btn-bootstrap" href="https://twitter.com/daviddoes___">
<span class="fa fa-twitter"></span>
</a>
<a class="btn btn-social-icon btn-bootstrap" href="https://github.com/SlouchingToast">
<span class="fa fa-github"></span>
</a>
<a class="btn btn-social-icon btn-bootstrap" href="https://www.linkedin.com/in/creativedavid">
<span class="fa fa-linkedin"></span>
</a>
</div>
</article>
</div>
</div>
<div id="portfoliopage">
<article>
<div class="portblock">
<h1>Hello!</h1>
</article>
</div>
</div>
</body>
</html>
CSS
.navbar-nav{
font-family:'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand{
font-family:'Open Sans Condensed', sans-serif;
font-size:2.0em;
}
body{
font-family:'Open Sans Condensed', sans-serif;
color:white;
margin:0;
padding:0;
}
h1{
padding: 0;
margin-top: -1%;
text-align: center;
color:rgb(54,54,54);
font-size: 80px;
text-decoration: underline;
}
.btn:hover{
color:#FEEE8B;
}
.btn{
align-text: center;
margin-bottom:3%;
margin-right:5px;
margin-left:5px;
border-radius: 0 !important;
font-size:20px;
color:rgb(54,54,54);
}
article{
padding-bottom:10px;
}
.block{
background-color:rgba(157,178,197,.6);
opacity:1;
width:50%;
height:12%;
margin-right:auto;
margin-left:auto;
margin-top:10%;
object-border:10px;
}
.portblock{
text-align:right;
background-color:rgba(157,178,197,.6);
opacity:1;
width:50%;
height:12%;
margin-top:10%;
object-border:10px;
margin-left:auto;
}
.portrait{
width:40%;
height:auto;
border-radius:50%;
margin-bottom:3%;
margin-top:3%;
opacity:.9;
}
#aboutpage{
background-image:url(https://crossorigin.me/http://i.imgur.com/Qt3kOoF.jpg);
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#portfoliopage{
background-image:url(https://crossorigin.me/http://i.imgur.com/IYXAg7k.jpg);
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
JavaScript
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
спасибо!
Да, вот как я изначально написал это, но кто-то в комнате с бесплатным номером Free Code Camp сказал, что это не так. Это никак не повлияло. Я вставил "" и оставил его в коде. – David