-1
我只想知道我应该在哪里更改，以便导航到侧边栏的“导航”的字体与其他三个菜单按钮相同。这是截图https://snag.gy/AnGs58.jpg 正如你所看到的，“导航”字体是不同的，我真的不知道哪个部分要改变。CSS/html更改链接字体
/*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 {}<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()">×</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>谢谢大家！
你的屏幕截图似乎没有工作。 – cosmoonot
采取屏幕截图并将其添加到此处。它无法从链接导入。 –
请在下面查看我的答案。 – cosmoonot