我正在重新使用 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
最佳答案
基本上，您必须找到导航的 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>
关于html - 尝试向导航栏添加新元素并向网站添加新页面[找不到错误]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35109916/