Question

我只是想知道我应该在哪里更改所以＆＃34;导航＆＃34;的字体。这导致侧边栏与其他三个菜单按钮相同。这是屏幕截图https://snag.gy/AnGs58.jpg 如您所见，＆＃34;导航＆＃34;字体是不同的，我真的不知道要改变哪个部分。

＆＃13;

/*stylesheet for Negros Occ Central Tourisn Website */

body {
  margin: 0px;
  background-image: url(bg.jpg);
  background: no-repeat center center cover;
}

#header {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 30px;
  padding: 16px;
  margin-top: 20px;
}

#header>#name {
  font-family: Caviar Dreams;
  float: left;
}

#footer {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  height: 32px;
  position: fixed;
  bottom: 0px;
}

#footer>p {
  margin: 8px;
  color: white;
  font: 12px arial;
  text-align: right;
}


/* The side navigation menu */

.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Stay on top */
  top: 0;
  left: 0;
  background-color: rgba(7, 50, 4, 0.8);
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 100px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
  font-family: Caviar Dreams;
}


/* The navigation menu links */

.sidenav a {
  margin-top: 10px;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
  color: #245009;
}


/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

#main {
  transition: margin-left .5s;
  padding: 20px;
  margin-top: 20px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

.button {
  background-color: #171817;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px;
  float: left;
}

.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

#menu a,
#menubutton a {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  font-family: Caviar Dreams;
  font-size: 13px;
}

@media only screen and (min-width:600px) {
  #menu {
    float: right;
    display: block;
  }
  .menuitem {
    display: inline;
  }
  .menuitem+.menuitem {
    border-left: 1px solid white;
    margin-left: 8px;
    padding-left: 8px;
  }
  #menubutton {
    display: none;
  }
}

@media only screen and (max-width:599px) {
  #menubutton {
    display: inline;
    float: right;
  }
  #menu {
    position: absolute;
    top: 48px;
    right: 0px;
    background: black;
    padding: 16px;
  }
  .shownmenu {
    display: block;
  }
  .hiddenmenu {
    display: none;
  }
  .menuitem {
    display: block;
  }
  .menuitem+.menuitem {
    margin-top: 8px;
  }
}

.clear {
  clear: both;
}

.content {}

＆＃13;

<div id="header">
  <div id="name">Negros Occidental Tourism Desk</div>
  <div id="menubutton"><a id="menulink" href="#">Menu</a></div>
  <div id="menu" class="hiddenmenu">
    <button class="button"><div class="menuitem"><span onclick="openNav()">Navigate</span></div></button>
    <button class="button"><div class="menuitem"><a href="#">Tourist Spots</a></div></button>
    <button class="button"><div class="menuitem"><a href="#">All Festivals</a></div></button>
    <button class="button"><div class="menuitem"><a href="#">About NIR</a></div></button>
  </div>
  <div class="clear"></div>
</div>
<div id="mySidenav" class="sidenav">
  <a href="#" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">District 1</a>
  <a href="#">District 2</a>
  <a href="#">District 3</a>
  <a href="#">District 4</a>
  <a href="#">District 5</a>
  <a href="#">District 6</a>
  <a href="#">Bacolod City</a>
  <a href="#">Negros Oriental</a>
</div>
<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>
<div id="footer">
  <p>Copyright 2017</p>
</div>

＆＃13;

谢谢大家！

Answer 1

将您的span更改为a：

<div class="menuitem"><span onclick="openNav()">Navigate</span></div>

将其替换为：

<div class="menuitem"><a onclick="openNav()">Navigate</a></div>

Answer 2

您可以使用@cosmoonot答案，或者如果您想使用<span>代替<a>使用此

.menuitem > span {
   font-family: Caviar Dreams;
}

CSS / html Change Link字体

2 个答案: