Question

I am currently studying Code Academy - Front End Developer course and next to it, I am trying to create my website.. I am really trying as this is my first time doing such thing. And I am already feeling lost and stupid. I got stuck on my header already! I have my header where I want to place my logo (on the left side) and next to it, I want my nav bar to appear (not right next to it, I want the nav bar to be more less in the centre of the page)
here is how it looks like now:

我如何能够这样做? 而且,如果你能够解释为什么应该这样做的话,我也会爱心,因此,我不只重复该守则,而是实际学习。感谢您的帮助!

<!--THIS IS MY HEADER-->
        <div>
            <header class="header">
                <img class="logo" src="./Pictures/Screenshot 2023-12-22 at 19.40.06.png" alt="My Image">
                <nav class="navbar">
                    <ul>
                        <li>ABOUT ME</li>
                        <li>MY WORK</li>
                        <li>CONTACT</li>
                    </ul>
                </nav>
            </header>
            
        </div>

CSS

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    background-color: white;
    border-bottom: solid;
  }

.logo {
    width: 188px;
    height: 90px;
}
.navbar{
    list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

Answer 1

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    background-color: white;
    border-bottom: solid;  
   display: flex;
   justify-content: space-between; 
   align-items: center;
   padding: 10px;
}

.logo {
    width: 188px;
    height: 90px;
}
.navbar {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
 
.navbar ul {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.navbar ul li {
    list-style-type: none;
    display:inline;
    margin-right:10px;
}

<!--THIS IS MY HEADER-->
<div>
  <header class="header">
    <img class="logo" src="./Pictures/Screenshot 2023-12-22 at 19.40.06.png" alt="My Image">
      <nav class="navbar">
        <ul>
          <li>ABOUT ME</li>
          <li>MY WORK</li>
          <li>CONTACT</li>
        </ul>
      </nav>
    </header>
</div>

Answer 2

而且,如果你能够解释为什么应该这样做的话,我也会爱心,因此,我不只重复该守则,而是实际学习。

RUS5使semantics变得更清楚,这基本上只是意味着现在有许多内容可以按照这些内容的含义加以利用。附有<代码><header>,用于您的顶部和<nav>,用于您的主要导航,是您已经通过的良好实例。

我的建议是使用<代码><a> tags within that <nav>,因为从本质上讲,你试图做些什么,将用户与另一页联系起来。在下面的几句中,我做了些什么。这些工作在<条码>和t;nav>内无缝,这意味着你也不必使用<条码>和t;ul>。当然,你仍然可以,而且没有什么错,但除非你有很好的理由使用,否则你只能放弃。

通过打上“条形”和“条形”;“头盔”和“条形”作为“条形” 您可以有以下几个方面:www.un.org/documents/index.html。 http://www.un.org/Docs/journal/Ar.pdf。这就意味着,你可以把连接点放在“条形”和“条形”内。

图像使高或宽度形成良好,然后确定其他选择,使图像保持与比例成正比,否则,你的形象就会受到两种价值观的硬编码的束缚。

我在风格上增加了一些评论,因为你似乎非常希望实际学习。

<!DOCTYPE html>
  <html lang="en">
     <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
           *{
              margin: 0;
              padding: 0;
           }
           header{
              display: flex;
              flex-direction: row; /* This is default so you can omit it but it s good to be explicit  */
              justify-content: flex-start; /* This will snap all content of header to the left due to  flex-direction: row   */
              background-color: white;
              border-bottom: solid;
              padding: 0.5rem 1rem; /* Padding top/bottom then left/right. 1rem = default pixel size of html font (14px or 16px etc) so 0.5rem = 7px or 8px  */
            }
           header > img{
              height: 90px; /* Set the height of your image  */
              width: auto; /* Keep the height/width ratio of source image  */
           }
           nav{
              display: flex;
              flex-direction: row;
              flex: 1; /* Use the rest of the available space of the <header> */
              justify-content: center; /* Keep the links in the center of this element  */
              align-items: center; /* Puts the links vertically in the center of the <nav> */
           }
           nav a{
              padding: 1rem;
              text-decoration: none; /* Take away the default link styling  */
              color: black;
              border-bottom: 2px solid transparent;
           }
           nav  a:hover{
              border-bottom: 2px solid black;
              transition: border-bottom 0.4s ease-in;
           }
        </style>
     </head>
     <body>
        <header class="header">
           <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg" alt="My Image">
           <nav class="navbar">
              <a href="./about.html">ABOUT ME</a>
              <a href="./work.html">MY WORK</a>
              <a href="./contact.html">CONTACT</a>
           </nav>
        </header>
     </body>
  </html>

Answer 3

为了在左边建立一个航标和集中航道的船长,你可以利用CSS灵活箱进行布局控制。在CSS的头盔中,显示:建立弹性集装箱的灵活性。使用正当联系:空间间将标志推向左边和航道,在两者之间创造空间。添加配对项目:中心垂直把物品放在头部内。对航标而言,应用显示:其布局灵活,合情合理:空距甚至平息,并调整其清单上所列项目的差值,以达到预期的间隔。这种组合法性特性为你的头盔提供了清洁和反应灵敏的布局,确保原木在左上,导航条星在上。调整您具体设计选择所需的价值。

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    background-color: white;
    border-bottom: solid;
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Align items to the start and end of the header */
    align-items: center; /* Center items vertically */
    padding: 10px; /* Add padding for spacing */
}

.logo {
    width: 188px;
    height: 90px;
}

.navbar {
    list-style-type: none;
    display: flex;
}

.navbar ul {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.navbar li {
    margin: 0 15px; /* Adjust spacing between navigation items */
}

<div>
    <header class="header">
        <img class="logo" src="./Pictures/Screenshot 2023-12-22 at 19.40.06.png" alt="My Image">
        <nav class="navbar">
            <ul>
                <li>ABOUT ME</li>
                <li>MY WORK</li>
                <li>CONTACT</li>
            </ul>
        </nav>
    </header>
</div>

友情链接