时间戳

首页 > 解决方案 > 我的导航栏在一个页面上更大，在另一个页面上更小

html - 我的导航栏在一个页面上更大，在另一个页面上更小

问题描述

我将附上我用来创建我的网站的 2 个不同的网页代码，我也只想知道为什么我的一个页面有一个正常大小的导航栏，为什么另一个页面有一个更大的导航栏。是的，我使用https://www.w3schools.com帮助我制作网站

这是正常大小的导航栏：https ://pastebin.com/gacWNhbK 

<!DOCTYPE html>
<html>
<head>
<title>Information About Lithuania</title>
<style>img {display: block;margin: auto;}</style>

<style>
a:visited {
  color: #c72aa2;
}
</style>

<style>
.center {
  text-align: center;
  border: 3px solid #5f5a5c;
}
</style>

<style>
body {
  background-color: #7c677f;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>
<ul>
  <li><a href="information.html">Home Page</a></li>
  <li><a href="touristdestinations.html">Tourist Destinations</a></li>
  <li><a href="famousplaces.html">Famous Places</a></li>
  <li><a href="historicalsites.html">Historical Sites</a></li>
</ul>
<div class="center">
  <strong><h1><p>Information About Lithuania</p></h1></strong>
</div>
<p align="center">Lithuania, officially the Republic of Lithuania, is a country in the Baltic region of Europe.<br>
Lithuania is considered to be one of the Baltic states.<br>
The country is situated along the southeastern shore of the Baltic Sea, to the east of Sweden and Denmark.<br></p>
<h1 align="center" style="font-family:verdana;">Language and Alphabet</h1>
<p align="center">Only two Baltic languages have survived to modern times, and Lithuanian is one of them (Latvian is the other).<br>
Although they seem similar in some aspects, they are not mutually intelligible. <br>
Much of the population of Lithuania speaks Russian, but visitors should refrain <br>
from using it unless it's absolutely needed - Lithuanians would rather hear someone attempt their language. <br>
The Lithuanians also don't mind practicing their English. German or Polish may help in some areas.<br>
Lithuanian language uses the Latin alphabet with some additional letters and modifications.<br></p>
<h1 align="center" style="font-family:verdana;">Religion</h1>
<p align="center">The majority religion of Lithuania is Roman Catholic at 79% of the population.<br>
 Other ethnicities have brought their religion with them,<br>
 such as the Russians with Eastern Orthodoxy and the Tatars with Islam.</p>



<img src="images/LithuaniaInformation.jpg" alt="Image" height="600" width="700">
<p align="right">&copy;Copyright&copy Web Design 2019-2020 -All Rights Reserved.</p>
<input type="button" name="b1" value="Back to Login Page" onclick="location.href='index.html'">
<input type="button" name="b2" value="Next page" onclick="location.href='touristdestinations.html'">

</body>
</html>

这是我不知道如何修复的超大 narbar：https ://pastebin.com/0m22xWbA

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>

<title>Tourist Destinations In Lithuania</title>

<style>img {display: block;margin: auto;}</style>

<style>
a:visited {
  color: #c72aa2;
}
</style>

<style>
body {
  background-color: #7c677f;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #8076a3;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>

</head>

<body>

<ul>
  <li><a href="information.html">Home Page</a></li>
  <li><a href="touristdestinations.html">Tourist Destinations</a></li>
  <li><a href="famousplaces.html">Famous Places</a></li>
  <li><a href="historicalsites.html">Historical Sites</a></li>
</ul>
<h1 align="center" style="font-family:verdana;"><br>Tourist Destinations In Lithuania</h1>
<h4 align="center" style="font-family:verdana;"><br><p><abbr title="Lithuania">Lit</abbr></p></h4>
<h2 align="center" style="font-family:verdana;"><br>Vilnius<br><br></h2>


<p align="center">Vilnius, Lithuania’s capital, is known for its baroque architecture, seen especially in its medieval Old Town.<br>
 But the buildings lining this district’s partially cobblestoned streets reflect diverse styles and eras, from the neoclassical Vilnius Cathedral to Gothic St. Anne's Church.<br>
 The 16th-century Gate of Dawn, containing a shrine with a sacred Virgin Mary icon, once guarded an entrance to the original city.<br></p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="images/Vilnus-Lithuania.jpg" style="width:100%">
  <div class="text">Image of Vilnius (1)</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="images/Vilnus-Lithuania2.jpg" style="width:100%">
  <div class="text">Image of Vilnius (2)</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="images/Vilnus-Lithuania3.jpg" style="width:100%">
  <div class="text">Image of Vilnius (3)</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 4000);
}
</script>

<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

<h2 align="center" style="font-family:verdana;"><br>Trakai Castle<br><br></h2>


<p align="center">Trakai is a lake resort and historically important city that sits close to Vilnius and makes a nice day trip if you are looking to get out of town.<br>
Trakai dates from the 13th century and is also the home of the Trakai Historical National Park that dates from 1991.<br>
 One of the main sights in the city is the Island Castle which is also the host of the Trakai Castle Festival and the entire town is surrounded by pretty water.<br>
 In the wider Trakai region there are some 200 lakes to enjoy during the warmer months.<br></p>
<a href="https://trakaimuziejus.lt/island-castle"><p style="text-align:center">A Link to the Trakai Castle</a>


<img src="images/Trakai_Castle.jpg"alt=”A castle in lithuania” style="width:1005px;height:700px;">


<h2 align="center" style="font-family:verdana;"><br>The Devil’s Museum<br><br></h2>


<p align="center">The Devil’s Museum is found in Kaunas and as you would expect from the name it has a huge collection of art work that depict images of the devil, witches, and a range of other wicked mythological creatures.<br>
You will find over 3,000 different pieces here and visitors can even donate items to the collection.<br>
There are a huge range of works here that use different materials such as ceramics, textiles, and paintings and you can even find other interesting items like pebbles that feature images of the devil.<br></p>


<img src="images/DevilsMuseum.jpg"alt=”The devils museum” style="width:1005px;height:700px;">


<h2 align="center" style="font-family:verdana;"><br>Ginuciai Water Mill<br><br></h2>


<p align="center">Nestled close to Ignalina is the Ginuciai Water Mill which dates from the 19th century and still straddles the waters that travel down to scenic Lake Linkmenas.<br>
In the days of old it would have been used to make flour and produce electricity although now it is a museum that also has a hotel attached.<br>
It is famous for being the only remaining wooden mill in Lithuania and you can still see all of its traditional machinery such as water wheels and mill stones.</p>


<img src="images/Ginuciai-Water-Mill.jpg"alt=”The Ginuciai Water Mill” style="width:1005px;height:700px;">


<p align="right">&copy;Copyright&copy Web Design 2019-2020 -All Rights Reserved.<br>&euro;                        ‎&lt;br>&trade;                           ‎&lt;/p> 



<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
  window.history.back();
}
</script>



<input type="button" name="b1" value="Next page" onclick="location.href='famousplaces.html'">
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
</body>
</html>

提醒一下，自从我使用 W3Schools 提供帮助后，我不会将任何这项工作视为自己的工作。希望可以有人帮帮我。

标签： htmlcss

解决方案

在您分配的第二个代码font-size: 20px;中body，它会影响您nav bar并使其变大。

只需添加css font-size:14px;。li a

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>

<title>Tourist Destinations In Lithuania</title>

<style>img {display: block;margin: auto;}</style>

<style>
a:visited {
  color: #c72aa2;
}
</style>

<style>
body {
  background-color: #7c677f;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

li a:hover {
  background-color: #111;
}
</style>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #8076a3;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>

</head>

<body>

<ul>
  <li><a href="information.html">Home Page</a></li>
  <li><a href="touristdestinations.html">Tourist Destinations</a></li>
  <li><a href="famousplaces.html">Famous Places</a></li>
  <li><a href="historicalsites.html">Historical Sites</a></li>
</ul>
<h1 align="center" style="font-family:verdana;"><br>Tourist Destinations In Lithuania</h1>
<h4 align="center" style="font-family:verdana;"><br><p><abbr title="Lithuania">Lit</abbr></p></h4>
<h2 align="center" style="font-family:verdana;"><br>Vilnius<br><br></h2>


<p align="center">Vilnius, Lithuania’s capital, is known for its baroque architecture, seen especially in its medieval Old Town.<br>
 But the buildings lining this district’s partially cobblestoned streets reflect diverse styles and eras, from the neoclassical Vilnius Cathedral to Gothic St. Anne's Church.<br>
 The 16th-century Gate of Dawn, containing a shrine with a sacred Virgin Mary icon, once guarded an entrance to the original city.<br></p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="images/Vilnus-Lithuania.jpg" style="width:100%">
  <div class="text">Image of Vilnius (1)</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="images/Vilnus-Lithuania2.jpg" style="width:100%">
  <div class="text">Image of Vilnius (2)</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="images/Vilnus-Lithuania3.jpg" style="width:100%">
  <div class="text">Image of Vilnius (3)</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 4000);
}
</script>

<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

<h2 align="center" style="font-family:verdana;"><br>Trakai Castle<br><br></h2>


<p align="center">Trakai is a lake resort and historically important city that sits close to Vilnius and makes a nice day trip if you are looking to get out of town.<br>
Trakai dates from the 13th century and is also the home of the Trakai Historical National Park that dates from 1991.<br>
 One of the main sights in the city is the Island Castle which is also the host of the Trakai Castle Festival and the entire town is surrounded by pretty water.<br>
 In the wider Trakai region there are some 200 lakes to enjoy during the warmer months.<br></p>
<a href="https://trakaimuziejus.lt/island-castle"><p style="text-align:center">A Link to the Trakai Castle</a>


<img src="images/Trakai_Castle.jpg"alt=”A castle in lithuania” style="width:1005px;height:700px;">


<h2 align="center" style="font-family:verdana;"><br>The Devil’s Museum<br><br></h2>


<p align="center">The Devil’s Museum is found in Kaunas and as you would expect from the name it has a huge collection of art work that depict images of the devil, witches, and a range of other wicked mythological creatures.<br>
You will find over 3,000 different pieces here and visitors can even donate items to the collection.<br>
There are a huge range of works here that use different materials such as ceramics, textiles, and paintings and you can even find other interesting items like pebbles that feature images of the devil.<br></p>


<img src="images/DevilsMuseum.jpg"alt=”The devils museum” style="width:1005px;height:700px;">


<h2 align="center" style="font-family:verdana;"><br>Ginuciai Water Mill<br><br></h2>


<p align="center">Nestled close to Ignalina is the Ginuciai Water Mill which dates from the 19th century and still straddles the waters that travel down to scenic Lake Linkmenas.<br>
In the days of old it would have been used to make flour and produce electricity although now it is a museum that also has a hotel attached.<br>
It is famous for being the only remaining wooden mill in Lithuania and you can still see all of its traditional machinery such as water wheels and mill stones.</p>


<img src="images/Ginuciai-Water-Mill.jpg"alt=”The Ginuciai Water Mill” style="width:1005px;height:700px;">


<p align="right">&copy;Copyright&copy Web Design 2019-2020 -All Rights Reserved.<br>&euro;                        ‎&lt;br>&trade;                           ‎&lt;/p> 



<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
  window.history.back();
}
</script>



<input type="button" name="b1" value="Next page" onclick="location.href='famousplaces.html'">
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
</body>
</html>

推荐阅读