HTML/CSS定位困惑

-3

我一直在尋找，我參加了一個關於codecademy的課程，但我仍然無法在自己的工作上做到這一點。問題是，當我讀到它時，我明白它，但根本無法使用它，或者當我正在做我自己的網站時弄清楚如何去做。HTML/CSS定位困惑

我到底該如何定位到我想要的位置？我應該尋找什麼？有像編輯定位100種方式，它使我很困惑..

我將不勝感激一些指示如何知道什麼時使用定位。我有網站的想法，但所有這一切都非常艱難。我希望在將來也可以使用這些圖片，但是我只是想先用html/css來創建圖片。我認爲我更像是一名設計師，但我真的希望我知道這一點，所以我可以從現在開始做好。

我的直接問題是如何將我移動到頁面的中間位置，附近的

結束

我的CSS代碼，現在是如下

  body 
      { 
       margin: 0; 
       background: #838383; 
       font-family: 'Oxygen', sans-serif; 
      } 
     header 
      { 
       height: 200px; 
       background: #222; 
       color: white; 

      } 

     nav 
      { 
       width: 500px; 
      } 

     nav ul 
      { 
       margin: 0; 
       padding: ; 
      } 
     nav ul li 
      { 
       color: white; 
       display: inline; 
       list-style-type: none; 
       padding: 5px 15px; 
      } 
     nav ul li a 
      { 
       color: white; 
      } 

     .login 
      { 
       margin: 300px; 
       text-align: center; 

      } 

     .login p 
      { 

      }

HTML代碼

   <html> 
       <head> 
        <title> Login </title> 
        <link rel="stylesheet" href="css/style.css" /> 
       </head> 
       <body> 
        <header> 
         <nav > 
          <ul> 
           <li><a href="index.php">Home</a></li> 
           <li><a href="archive.html">Archive</a></li> 
           <li><a href="#">Login</a></li> 
          </ul> 
         </nav> 

         <div class="login"> 
          <h1>Login</h1> 
           <p><input type="text" name="login" placeholder="Username"></p> 
           <p><input type="password" name="password" placeholder="Password"></p> 
           <p><input type="submit" name="commit" value="Login"></p> 
         </div> 
        </header> 

       <footer></footer> 

       </body> 
      </html>

來源

2015-02-10 Xylus

_「我怎麼會移動到頁面的中間位置，臨近年底」 _我不明白你的要求。你能澄清嗎？ – Jack 2015-02-10 20:54:21

這個問題很難閱讀或理解與不完整的句子和缺少的科目。不過，從我可以收集的信息來看，聽起來像你想要的是關於CSS定位的教程。對此，我說有成千上萬的人在線。只要看看他們。 – leigero 2015-02-10 20:57:02

@Jack抱歉，我沒有看到我沒有完成這個句子。我試圖將導航元素移動到屏幕中間（鏈接）然後向下。所以我想我需要編輯邊距/填充，但這也會移動其他所有內容。 – Xylus 2015-02-10 21:04:10

這是你想要做的？：

http://jsfiddle.net/8y00nhnc/

這裏是我改變什麼：

nav 
     { 
      width: 500px; 
      margin: auto; 
      text-align: center; 
     } 

    nav ul 
     { 
      margin: 0; 
      padding: 0; 
     }

來源

2015-02-10 21:10:38 Jack

是的！我還使用了padding-top將其向下移動。非常感謝！ – Xylus 2015-02-10 21:18:08

根據您的更新意見在下面發佈了一個答案。我認爲這更多的是你要找的東西。一探究竟。 – user3781632 2015-02-10 21:25:03

-1

你想首先定位什麼？它看起來像登錄，因爲你有很多利潤。這會使您的登錄浮動在頁面中間。只適用於現代瀏覽器。你的HTML改爲如下：

HTML

<body> 
    <header> 
     <nav > 
     <ul> 
      <li><a href="index.php">Home</a></li> 
      <li><a href="archive.html">Archive</a></li> 
      <li><a href="#">Login</a></li> 
     </ul> 
     </nav> 
    </header> 
    <div class="login"> 
      <h1>Login</h1> 
      <p><input type="text" name="login" placeholder="Username"></p> 
      <p><input type="password" name="password" placeholder="Password"></p> 
      <p><input type="submit" name="commit" value="Login"></p> 
    </div> 
    </div> 
    <footer></footer> 
</body>

CSS

body { 
    position: relative; 
} 

.login { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); /* add vender prefixes */ 
}

來源

2015-02-10 20:59:29

爲了有黑色頭區域內登錄部分，你需要做的：

首先移動導航DIV中的登錄DIV：

<nav> 
     <ul> 
      <li><a href="index.php">Home</a></li> 
      <li><a href="archive.html">Archive</a></li> 
      <li><a href="#">Login</a></li> 
     </ul> 

     <div class="login"> 
     <h1>Login</h1> 
     <p><input type="text" name="login" placeholder="Username"></p> 
      <p><input type="password" name="password" placeholder="Password"></p> 
       <p><input type="submit" name="commit" value="Login"></p> 
     </div> 
    </nav>

然後Nav的寬度改爲100 ％：

nav { 
    width: 100%; 
    }

最後使用margin: 0 auto;居中登錄股利，並給它一些填充的造型：

.login { 
    padding: 20px; 
    margin: 0 auto; 
    text-align: center; 
}

完整的示例： http://jsfiddle.net/1bhfm0bo/2/

來源

2015-02-10 21:23:01 user3781632

我正在尋找這個http://jsfiddle.net/1bhfm0bo/3/ 現在唯一的問題是我真的不知道如何垂直對齊整個登錄類，而無需手動猜測margin-top （我有一種感覺，我這樣做效率很低：/並且有更簡單的方法） – Xylus 2015-02-10 21:28:54

哦，好的。你的問題不清楚。很高興你解決了它。 – user3781632 2015-02-10 21:30:28

@Xylus有時候會手動猜測，直到它看起來正確。嘗試使用％年齡而不是px值（如果有幫助）。 – leigero 2015-02-10 21:33:20

HTML/CSS定位困惑

回答

相關問題