如何在導航欄中隔開單詞並將所有文本變為白色？

Question

我試圖做一個沒有太大成功的酒吧。 我想將“主頁”、“關於我”和參考書目這三個詞中的每一個分開，它們分別位於左側、中間和右側。

我還想更改它們的文本，使它們是白色的。 這是它現在的樣子和下面的代碼示例：

<!DOCTYPE html>
<html>
<head>  
    <style>
     h1 {
          text-align: center;
        }
     
     h4 {
          color: #00008B;
          font-size: 2em;
        }

     h5 {
          text-align: center;
        }

    body {
           background-color: #FAFAFA;
         }

 .navigation {
           color: #ffffff;
           list-style-position: 
           box-sizing: border-box;
           margin-left: 0;
           padding: 0;
           background-color: #000000; 
           
         }


.middle {
           display: block;
           margin-left: auto;
           margin-right: auto;
           width: 50%
        }

 .footer {
           color: #0000FF;
        }

    </style>
</head>
<body>
       <h1>Main Page</h1>
       <h5>Osirin bin Osiris</h5>

        <nav>
        <p class="navigation"> 
          <a class="main" href="index.html">Main Page</a>
          <a class="about" href="about.html">About Me</a>
          <a class="biblio" href="bibliography.html">Bibliography</a>
        <p>
        </nav>

    <h4>History of the Internet</h4>

    <img src="ARPAnet.png" alt="ARPAnet diagram" length="607" width="490" class="middle">

    <p> The modern day internet arose from the intranet developed by the U.S. military in 1969 (known as ARPAnet). Arpanet connected university computers across the country. It was restricted to sharing research material and was difficult to use.
Despite this, it was the essential foundation for the modern day internet that spans the globe. It’s important to note that the world wide web is not the same thing as the internet. The world wide web is a subset of the internet. It’s a collection of webpages containing images, videos, text, and sounds that are accessed using the http protocol. The best analogy to explain this difference would be to imagine a highway. The internet can be likened to a major highway and the world wide web are passenger car. There are many passenger cars that pass on the highway however; the highway contains more than just cars. It has trucks and vans travelling for business. In the same way, the internet isn’t just used by individuals but also governments, businesses and even satellites communicating with each other using different protocols.
   </p>

    <h4>How a page is delivered</h4>
    <p> There are many things that need to work in order to bring a webpage to a device. These are: 
        <ul> 
          <li> Internet connection </li>
          <li> Web browser </li>
          <li> Server </li>
        </ul> 
    <br>

When a person types in a web address, the operating system connects to a domain name server which will send back the I.P address that matches the text address to the user’s device. As the webpage appears, the user then interacts with the site by sending and receiving requests (i.e. clicking buttons, typing words, looking up images). 
   
   <br><br>

Information does not get communicated through the internet as it appears on a website. Instead, the browser breaks down texts, words, and images into small packets of information which are then sent from a computer/smartphone to the router, to a web server and then down fibre optic cables across the globe.
    </p>

<footer>    
<p class="footer"><b> </b></p>
</footer>

</body>
</html>

Answer 1

許多解決方案。 一種解決方案是使用彈性盒子。 像那樣。 您只能將其添加到您的樣式中：

.navigation {
  display: flex;
}
.navigation a {
  display: block;
  width:33%;
  text-align: center;
  color: white;
}

工作示例

 h1 { text-align: center; } h4 { color: #00008B; font-size: 2em; } h5 { text-align: center; } body { background-color: #FAFAFA; }.navigation { color: #ffffff; list-style-position: box-sizing: border-box; margin-left: 0; padding: 0; background-color: #000000; }.middle { display: block; margin-left: auto; margin-right: auto; width: 50% }.footer { color: #0000FF; }.navigation { display: flex; }.navigation a { display: block; width:33%; text-align: center; color: white; }

 <.DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Main Page</h1> <h5>Osirin bin Osiris</h5> <nav> <p class="navigation"> <a class="main" href="index.html">Main Page</a> <a class="about" href="about.html">About Me</a> <a class="biblio" href="bibliography.html">Bibliography</a> <p> </nav> <h4>History of the Internet</h4> <img src="ARPAnet.png" alt="ARPAnet diagram" length="607" width="490" class="middle"> <p> The modern day internet arose from the intranet developed by the US military in 1969 (known as ARPAnet). Arpanet connected university computers across the country. It was restricted to sharing research material and was difficult to use, Despite this. it was the essential foundation for the modern day internet that spans the globe. It's important to note that the world wide web is not the same thing as the internet. The world wide web is a subset of the internet, It's a collection of webpages containing images, videos, text. and sounds that are accessed using the http protocol. The best analogy to explain this difference would be to imagine a highway. The internet can be likened to a major highway and the world wide web are passenger car; There are many passenger cars that pass on the highway however. the highway contains more than just cars. It has trucks and vans travelling for business, In the same way, the internet isn't just used by individuals but also governments. businesses and even satellites communicating with each other using different protocols. </p> <h4>How a page is delivered</h4> <p> There are many things that need to work in order to bring a webpage to a device: These are, <ul> <li> Internet connection </li> <li> Web browser </li> <li> Server </li> </ul> <br> When a person types in a web address. the operating system connects to a domain name server which will send back the IP address that matches the text address to the user's device, As the webpage appears. the user then interacts with the site by sending and receiving requests (ie, clicking buttons, typing words. looking up images). <br><br> Information does not get communicated through the internet as it appears on a website, Instead, the browser breaks down texts, words, and images into small packets of information which are then sent from a computer/smartphone to the router. to a web server and then down fibre optic cables across the globe. </p> <footer> <p class="footer"><b> </b></p> </footer> </body> </html>

Answer 2

這應該讓你朝着正確的方向前進，用這個替換 your.navigation 規則並添加 styles 鏈接

 .navigation { color: #ffffff; display: flex; justify-content: space-between; /*if you dont want the items to go all the way to the end*/ padding-left: 10px; padding-right: 10px; background-color: #000000; }.navigation a { color: white; }

如何在導航欄中隔開單詞並將所有文本變為白色？

問題描述

2 個解決方案

解決方案1
0 2022-01-04 20:03:22

解決方案2
0 2022-01-04 20:08:42

如何在導航欄中隔開單詞並將所有文本變為白色？

問題描述

2 個解決方案

解決方案1 0 2022-01-04 20:03:22

解決方案2 0 2022-01-04 20:08:42

解決方案1
0 2022-01-04 20:03:22

解決方案2
0 2022-01-04 20:08:42