html - 尝试向导航栏添加新元素并向网站添加新页面[找不到错误]

Question

我正在重新使用 Twitter Bootstrap 主题来创建网站。我是网页设计的初学者，我知道这听起来可能微不足道。我正在尝试向我的导航栏添加一个新页面。因此，除了关于 和主页 之外，我正在尝试添加一个博客 页面。为此，我已将所有相应的电子表格 css 添加到正确的 html 中，并相应地通过 FTP 上传了我的新页面，但它不起作用!

我认为我已经正确地完成了所有事情，但由于某种原因它不起作用而且我似乎无法让它起作用!

网址是www.hoodoopro.com

我们非常欢迎任何帮助!

.page-marketing-standard {

}

/* .page-marketing-standard .heading {
	font-size: 40px;
	font-size: 2.182rem;
	line-height: 1.042;
} */

.page-marketing-standard .heading + h2 {
	font-size: 1.6rem;
}

@media ( min-width: 480px ) {
	.page-marketing-standard .heading + h2 {
		font-size: 2.182rem;
	}
}

.hero-careers {
	position: relative;
	
	padding: 0;

	height: auto;

	border-bottom: 1px solid #dfe0e1;

	background: #fff;
	color: inherit;

}

/* adjust hero height with header and adjusted for border-bottom */

@media ( min-width: 992px ) {

	.hero-careers { 
		height: 80%;
		/* height: calc(100% - 135px); */
		min-height: 590px;
		max-height: 800px;
	}

}

@media ( min-width: 1200px ) {
	
	.hero-careers { 
		height: calc(100% - 145px);
		max-height: 800px;
	}

}

@media ( min-width: 1320px ) {
	
	.hero-careers { 
		height: calc(100% - 154px);
	}

}

.hero-careers > .container {

	padding-top: 30px;
	padding-bottom: 185px;

	background: url("../img/hero.jpg") 140px 100% no-repeat;
	background-size: 240px;
}


@media ( min-width: 400px ) {
	.hero-careers > .container {
		background-position: 100% 100%;

		padding-bottom: 200px;
	}
}

@media ( min-width: 568px ) {
	.hero-careers > .container {
		background-position: 100% 100%;

		background-size: 50%;
	}
}

@media ( min-width: 768px ) {

	.hero-careers > .container {
		padding-top: 50px;

		background-size: 46%;
		background-position: 100% 100%;
	}

}

@media ( min-width: 992px ) {

	.hero-careers > .container {
		padding-top: 0;
		padding-bottom: 0;

		background-size: 55%;
		background-position: 100% 100%;
	}

}

@media ( min-width: 1200px ) {

	.hero-careers > .container {
		background-size: contain;
		background-position: 100% 30px;
	}

}

@media ( min-width: 768px ) {

	.hero-careers h1 span {
		white-space: nowrap;
	}

}

@media ( max-width: 767px ) {
	.hero-careers p {
		max-width: 280px;
	}
}

@media ( max-width: 767px ) {
	.hero-careers .v-align-parent {
		max-width: 600px;

		margin-left: 0;

	}
}



@media ( min-width: 768px ) and ( max-height: 849px ), (max-width: 767px ) and ( max-height: 520px ) {
	.page-careers .hint-arrow-contrast {
		position: fixed;
	}

}


/* carousel slides */

.carousel-item {
	height: 0;

	padding-bottom: 75%;

	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

@media ( min-width: 568px ) {
	.carousel-item {
		padding-bottom: 62.5%;
	}
}

@media ( min-width: 768px ) {
	.carousel-item {
		padding-bottom: 50%;
	}
}

@media ( min-width: 1690px ) {
	.carousel-item {
		height: 840px;

		padding-bottom: 0;
	}
}

.active .carousel-item {
	
}

/* listings */

.level-careers-overview {
	padding-bottom: 0;
}

.vacancy-profile {
	max-width: 280px;

	-webkit-transform: translateX(30px);
	transform: translateX(30px);

}

@media ( min-width: 768px ) {
	.vacancy-profile {
		max-width: 100%;
	}
}

@media ( min-width: 992px ) {
	.vacancy-profile {
		position: relative;
		margin-top: -80px;
		-webkit-transform: translateX(60px);
		transform: translateX(60px);
		z-index: -1;
	}

}

@media ( min-width: 768px ) and ( max-width: 991px ) {

	.level-careers-overview .inline-tabs {
		display: block;
	}
	
}

.level-careers-overview blockquote {
	margin: 0 0 2em;

	font-style: italic;
	color: #2a2a2a;
}

.level-careers-overview blockquote p {
	margin-bottom: 20px;
}

@media ( min-width: 768px ) {
	.level-careers-overview blockquote p {
	margin-bottom: 30px;
	}
}

.level-careers-overview blockquote p:before {
	content: '\201C';

	font-style: normal;
}

.level-careers-overview blockquote p:after {
	position: relative;

	content: '\201D';

	vertical-align: baseline;
}

@media ( min-width: 768px ) {
	.level-careers-overview blockquote p:before {
		margin-left: -.9em;
		padding-right: .5em;
	}

	.level-careers-overview blockquote p:after {
		padding-left: .4em;
		top: 1ex;
	}

}

.level-careers-overview cite {
	display: block;

	opacity: .3;
	
	font-weight: 700;
	font-style: normal;
	font-size: 14px;
	text-transform: uppercase;
}

@media ( max-width: 767px ) {
	.level-career-listings {
		padding-bottom: 60px;
	}
}


.level-career-listings .inline-tabs {
	display: block;
}

.level-career-listings .post.active,
.level-career-listings .post .entry {
	padding-bottom: 20px;

	border-bottom: 1px solid #f6f6f6;
}

/* individual job posts */
.level-career-listings .post .entry {
	margin-bottom: 20px;
}

@media ( min-width: 992px ) {

	.level-career-listings .post .entry {
		margin-bottom: 40px;
	}

}

.level-career-listings .post .entry:last-child {
	padding-bottom: 0;
	margin-bottom: 0;

	border: 0;
}

wor<!DOCTYPE html>
<!--[if lte IE 9]><html class="no-js is-ie"><![endif]-->
<!--[if gt IE 8]><!--><html class=no-js><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	
	<title>News</title>
	<link rel=stylesheet href="css/main.css">
	<link rel=stylesheet href="css/owl.carousel.css">
	<link rel=stylesheet href="css/about.css">
	<link rel=stylesheet href="css/blog.css">

	<!--[if lte IE 8]>
	<link rel=stylesheet href="css/ie.css">
	<![endif]-->
		<script src="js/vendor/modernizr.js"></script>
	
		<script src="js/vendor/respond.min.js"></script>

</head>

<body class="page-careers">

<div class="header">
	<div class="container rel text-left">
		<a class="brand brand-color" href="index.html"></a>

				<nav class=nav>
			<ul>
				<li><a href="index.html">Home</a>
				<li class="active"><a href="about.html">About</a>
				<li class="active"><a href="blog.html">Blog</a>
			</ul>
		</nav>
	</div>
</div>	


<div class="level level-hero hero-careers has-hint">

	<div class="container full-height">

		<div class="v-align-parent">
			<div class="v-center">
				<div class="row">
					<div class="col-sm-6 col-md-5">
						<h1 class="mb-30 xs-mb-10 scaled"><span>We are Product Experts.</span> <br class="hidden-sm"> Your product is our priority</h1>
						<p class="mb-30 xs-mb-20">We are a team of experienced Product Managers educated in Berkeley and Stanford, some of us ex-Consultants, that want to work on innovative products.
						We want to put our expertise in use for the most challenging startups.

						<p><a class="btn btn-prepend btn-shadow btn-scroll" href="#">
								<i class="prepended icon-arrow-down"></i><span class="btn-txt">Learn More</span>
							</a>
					</div>
				</div>

			</div>
		</div>

	</div>	

	<div class="hint-arrow hint-arrow-contrast"></div>

</div>

<div class="level no-border">
	<div class="container">

		<div class="row">
			<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
				<h1 class="mb-25 sm-mb-20 heading scaled color-dark heading-bordered bordered-above">It is time to give a startup a change</h1>
				
				<h2 class="text-center w-300 color-dark mb-70 sm-mb-40 xs-mb-20">Who are we?</h2>
			</div>
		</div>

		<div class="row mb-60 xs-mb-20">
		
			<div class="col-sm-6 col-lg-4 col-lg-offset-2 xs-mb-20">
				<div class="has-icon">
					<!-- <i class="icon icon-laptop"></i -->
					<h3 class="mb-25 md-mb-10">Chantal Marin</h3>
					<p class="smaller">Co-founder.Serial Entrepreneur.Co-founder @Letsapp @Weeleo @DroneAdventures @GymLess. MsC CS at UCL. BS EECS at UC Berkeley. See more at: https://uk.linkedin.com/in/chantalmarin

				</div>
			</div>
			
			<div class="col-sm-6 col-lg-4">
				<div class="has-icon">
					<!--<i class="icon icon-phone"></i> -->
					<h3 class="mb-25 md-mb-10">Marily Nika</h3>
					<p class="smaller"></p>PM @Google. PhD of Computer Science at Imperial College in London.
				</div>
			</div>
		
		</div>

		<div class="row xs-mb-20">
		
			<div class="col-sm-6 col-lg-4 col-lg-offset-2 xs-mb-20">
				<div class="has-icon">
					<!--<i class="icon icon-flame"></i>	-->
					<h3 class="mb-25 md-mb-10">Marc Molins</h3>
					<p class="smaller"></p>Product Manager at Rocket Internet. Serial Entrepreneur. BS in Telecom engineering.
					See more at: https://es.linkedin.com/in/marcmolinsgracia/en 

				</div>
			</div>
			
			<div class="col-sm-6 col-lg-4">
				<div class="has-icon">
					<!-- <i class="icon icon-camera"></i> -->
					<h3 class="mb-25 md-mb-10"></h3>
					<p class="smaller"></p>
				</div>
			</div>
		
		</div>

	</div>

</div>

<div class="carousel">
	<div class="carousel-item" style="background-image: url('img/slide-1.jpg')">

	</div>
	<div class="carousel-item" style="background-image: url('img/slide-3.jpg')">

	</div>
	<div class="carousel-item" style="background-image: url('img/slide-2.jpg')">

	</div>
</div>

<div class="level">

	<div class="container">

		<div class="row">

			<div class="col-md-6 text-center">
				<img src="img/ceo.jpg" width="90%">

			</div>

			<div class="col-md-6">
				<h2>Conquer your fears as some of our happy clients say. </h2>
				<br/>
				<br/>
				<blockquote>
					Don't wait for your product to be left behind.
				</blockquote>

				<p></p>
			</div>

		</div>


	</div>

</div>





<div class="footer text-center">
	<p>
		<a href="index.html">hoodoopro.com</a> | January 2016
	</p>

</div>	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>
<!-- //-beg- concat_js -->
<script src="js/vendor/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- //-end- concat_js -->
<script>
(function(){


    var windowWidth = function() {
        var e = window, 
        a = 'inner';

        if ( !( 'innerWidth' in window ) ) { 
            a = 'client';
            e = document.documentElement || document.body;
        }
        return e[ a+'Width' ];
    }

    var carouselPadding = function() {

        var limit =  1690; 
        if ( Modernizr.mq("( min-width: " + limit + "px ) ") ) {

            padding = Math.round( ( windowWidth() - limit ) / 2 );

        }

        else {
            
            padding = 0;
        
        }

        return padding;
    };

    var owl = $(".carousel");
    
    owl.owlCarousel({
     
        items : 1,
        loop : true,
        // margin : 10,
        nav : false,
        dots : true,
        responsive :  {
            0  : {
                stagePadding : 0
            },
            1690 : {
                stagePadding : carouselPadding(),
                margin : 30
            },
        }
    });

    $('.owl-item:not(".active")').on('click', function(e) {

    	if ( $(this).next().is('.active') ) {
			owl.trigger('next.owl.carousel');
    	}

    	else {
			owl.trigger('prev.owl.carousel');
    	}
    });


}());


</script>


	
</body>
</html>

谢谢 ] 1

Answer 1

基本上，您必须找到导航的 HTML 所在的位置，并添加指向博客页面的新 anchor 标记 (<a>)。

<a href="blog.html">Blog</a>

---

index.html

找到以下代码:

<p class="fmenu">
   <a href="index.html">HOME</a> | <a href="about.html">ABOUT</a>
</p>

替换为:

<p class="fmenu">
   <a href="index.html">HOME</a> | <a href="about.html">ABOUT</a> | <a href="blog.html">BLOG</a>
</p>

---

about.html

找到以下代码:

<nav class="nav">
   <ul>
      <li><a href="index.html">Home</a></li>
      <li class="active"><a href="about.html">About</a></li>
   </ul>
</nav>

替换为:

<nav class="nav">
   <ul>
      <li><a href="index.html">Home</a></li>
      <li class="active"><a href="about.html">About</a></li>
      <li><a href="blog.html">Blog</a></li>
   </ul>
</nav>