調整頁面大小時的 Div 定位和定位 {Html}

Question

我是 web 編程的初學者。 我正在嘗試克隆谷歌搜索頁面。 我實現了構建克隆網站的結構。

第一個問題

但是，我對 div 的定位有疑問。 我正在使用表格 class 搜索書面文本，我想在此表格上方添加帶有特定邊距的 google 徽標圖片。 我使用 div 來划分頁面來實現這一點。 但是，當我更改谷歌框架 div position 時，所有 div 都會隨着這個變化而改變。 例如，當我更改#oneGoogleBar 邊距時，表單和#otherlinks 正在發生變化。 我可以通過更改其邊距值來更改#otherlinks，但這不是可靠的解決方案（例如，每次我都需要更改它（例如，如果我有多個 div，這種方法將非常乏味）。

第二個問題

當我調整大小（使網頁更小）時，#otherlinks 開始向下移動。 我也不明白這個原因。

我在同一個問題中提出了這些問題，因為這些問題可能是初學者級別的問題。 您可以在下面找到代碼。

HTML

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="index_css.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <div id="oneGoogleBar">
    <iframe id="backgroundImage" frameBorder = "0"
        src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </iframe>
       </div>
        <div id="form_div">
        <form action="https://google.com/search" class="form">
            <input type ="text" name="q"> <br><br>
            <input type ="submit" value="Google Search">
            <input type ="submit" value ="I'm Feeling Lucky">
        </form>
        </div>
        <div id = "other_links">
        <a href="googleImage.html" class=google_image_page>Google Image Search</a>
        <a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
        </div>
    </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.form{
    text-align: center;
    padding-top:150px;
}
input[type=submit]{
    
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    border-radius:inhterit;
    color: #3c4043;
    font-family: arial,sans-serif;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    padding-left: 25px;
    outline:none;
}

input[type=text]:hover{
    border-color:#9DD9F3;
}


input[type=text]{
    width : 385px;
    height: 25px;
    border-radius: 15px;
    outline:none;
    
}
.google_image_page{
    font-family: arial,sans-serif;
    color:black;
    text-decoration:none;
    font-size:13px;
    
    
}

.google_advanced_page{
    font-family: arial,sans-serif;
    color:black;
    text-decoration:none;
    font-size:13px;
    
}


#other_links{
     margin-top : -40%;
     margin-left : 80%;
     margin-bottom: -85%
 }

 #oneGoogleBar{
     position: relative;
     margin-left : 42%;
     margin-top: 15%;
     max-width:10%;
     max-height: 10%
     
     
 }

Answer 1

您使 html 文檔變得非常復雜，這不是必需的。 而不是<iframe>你可以簡單地使用<img>標簽。 在您的 CSS 中，您使用 % 作為保證金屬性，這使得 alignment 變得混亂。 看看這個。

HTML 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <ul>
        <li>Gmail</li>
        <li>Images</li>
      </ul>
    </nav>
    <main>
      <img
        class="logo"
        src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
        alt=""
      />
      <form action="">
        <input type="text" /> <br />
        <br />
        <input type="submit" value="Google Search" />
        <input type="submit" value="I'm Felling Lucky" />
      </form>
    </main>
  </body>
</html>

CSS 文件

body {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
  display: flex;
  flex-direction: row-reverse;
}
nav ul li {
  margin: 20px;
}

main {
  align-items: center;
}
.logo {
  display: block;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}
form {
  text-align: center;
}
input[type="text"] {
  margin-top: 20px;
  width: 385px;
  height: 25px;
  border-radius: 15px;
  outline: none;
}

Answer 2

您基本上是在為每個 div 應用邊距，因此它可以到達您想要的位置。 好吧，這不是一個很好的做法。
而不是這樣做，只需使用

display: flex, ...

達到你想要的。 基本上在 Html 中，元素是根據它們在代碼中的位置顯示的。 意思是，如果你想要一個 header 里面有“谷歌圖片搜索”，那就先寫吧。

調整頁面大小時元素位置發生變化的原因是，您在整個地方都使用了邊距。 它發生是很自然的。

我會避免使用 iframe，因為沒有理由使用它。 只需在 html 中使用一個簡單的 img 標簽。

索引.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
    <main>
        <img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google-img" />
        <div class="form-div">
            <form action="https://google.com/search" class="form">
                <input type ="text" id="search-field">
                <div>
                    <button>Google Search</button>
                    <button>I'm Feeling Lucky</button>
                </div>
            </form>
        </div>
    </main>        
    </body>
</html>

樣式.css：

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

body {
  width: 100%;
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  margin-top: 200px;
}

header {
  display: flex;
  width: 100%;
  align-items: right;
  justify-content: right;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.form-div {
  width: 100%;
  margin-top: 35px;
}

.form div {
  margin-top: 20px;
}

.form div button {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
}
.form div button:hover {
  cursor: pointer;
}

#search-field {
  width: 80%;
  height: 44px;
  border-radius: 24px;
  border: 1px solid #dfe1e5;
  padding-left: 30px;
}
#search-field:focus {
  outline: none;
}

只是一些注釋：

在 Html 和 css 中，你沒有使用 camelCaseNaming，你只是在不同的部分之間放了一個 -。 所以oneGoogleBar應該是one-google-bar
不要使用 iframe。
你不應該使用 <br> 來對齊iteams。 看看我是如何使用 flex box 的。
將 css 文件命名為 Style.css。 沒有規則，但通常這是人們編寫代碼的方式。
如果你想構建一個已經存在的頁面，檢查頁面是一個很好的做法。 你可以從中學到很多東西。
最后但也是最重要的事情：繼續努力。

編輯：

變更清單：

我在 google.com 中找不到任何“Google 圖片搜索”，所以我假設您希望它為 header。 所以我把它放在了上面。
我將名稱“index_css.css”更改為“style.css”
我將名稱“oneGoogleBar”更改為“one-google-bar”
我將名稱“form_div”更改為“form-div”
我將名稱“other_links”更改為“其他鏈接”

我按照您提出的相同順序回答您的問題：

1- Html 中的第一個元素是“one-google-bar”。 在 Html 中，第一個元素在第二個元素之上，第二個在第三個元素之上，...... 基本上我的意思是元素出現在頁面上，基於它們在您的代碼中的位置。\

您的 Html 結構：
1) 一個谷歌酒吧
2）form-div
3) 其他鏈接

如果您更改“one-google-bar”的位置，其下方的位置也會更改。

解決方案：

你必須按順序工作。 從頂部元素開始，然后向下移動。

變更清單：

我在 'one-google-bar' 上方放置了 'other-links'，因為就像我之前說的，我不知道你想把它放在哪里。 我假設您希望它位於頁面的頂部。
我從您的 css 中刪除了“其他鏈接”。 因為這個元素已經在頂部。
我對您的“one-google-bar”css 文件進行了一些更改。 變化如下：
- 我刪除了“位置：相對”。 因為您希望它與什么相關？
- 我假設你首先給它'margin-left：50％'，因為它沒有放在中間（因為圖像也有一些地方）你把它改成了'margin-left：42％'。
  那么有一個巧妙的技巧將元素放在中間：

邊距：0 自動；

這樣，您將頂部和底部邊距設置為 0。瀏覽器會自動設置左右邊距，使元素位於中間。
現在在它下面，隨意更改頂部和底部邊距。
我還將“最大寬度：10%”更改為：

寬度：適合內容；

不是使用最大寬度的正確方法。

2-您說您沒有意識到為什么在調整頁面大小時所有元素都會移動。
在您的“one-google-bar”中，您有：

邊距頂部：150px；

該 % 是發生這種情況的原因。 這意味着將當前寬度的 15% 添加到上邊距，並且由於您更改了寬度，因此它也會更改。 因此整個頁面移動（因為元素是按順序放置的......）。

解決方案：

只需使用 px 而不是 %。

變更清單：

我將 'margin-top: 15%' 更改為：

最高保證金：15%；

索引.html:

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <div id = "other-links">
            <a href="googleImage.html" class=google_image_page>Google Image Search</a>
            <a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
        </div>
        <div id="one-google-bar">
            <iframe id="backgroundImage" frameBorder = "0"
                src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </iframe>
       </div>
        <div id="form-div">
            <form action="https://google.com/search" class="form">
                <input type ="text" name="q"> <br><br>
                <input type ="submit" value="Google Search">
                <input type ="submit" value ="I'm Feeling Lucky">
            </form>
        </div>
        
    </body>
</html>

樣式.css：

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
  text-align: center;
  padding-top: 150px;
}
input[type="submit"] {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  border-radius: inhterit;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  padding-left: 25px;
  outline: none;
}

input[type="text"]:hover {
  border-color: #9dd9f3;
}

input[type="text"] {
  width: 385px;
  height: 25px;
  border-radius: 15px;
  outline: none;
}
.google_image_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

.google_advanced_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

/* #other-links {           //REMOVED
  margin-top: -40%;         //REMOVED
  margin-left: 80%;         //REMOVED
  margin-bottom: -85%;      //REMOVED
} */

#one-google-bar {
  /* position: relative;     //REMOVED       
  margin-left: 42%;          //REMOVED   
  margin-top: 15%;           //REMOVED           
  max-width: 10%;            //REMOVED       
  max-height: 10%;           //REMOVED  
  */
  width: fit-content;        /*ADDED*/                    
  margin: 0 auto;            /*ADDED*/                    
  /* margin-top: 15%;        //REMOVED*/
  margin-top: 150px;         /*ADDED*/   
}

Answer 3

編輯：

變更清單：

我在 google.com 中找不到任何“Google 圖片搜索”，所以我假設您希望它為 header。 所以我把它放在了上面。
我將名稱“index_css.css”更改為“style.css”
我將名稱“oneGoogleBar”更改為“one-google-bar”
我將名稱“form_div”更改為“form-div”
我將名稱“other_links”更改為“其他鏈接”

我按照您提出的相同順序回答您的問題：

1- Html 中的第一個元素是“one-google-bar”。 在 Html 中，第一個元素在第二個元素之上，第二個在第三個元素之上，...... 基本上我的意思是元素出現在頁面上，基於它們在您的代碼中的位置。\

您的 Html 結構：
1) 一個谷歌酒吧
2）form-div
3) 其他鏈接

如果您更改“one-google-bar”的位置，其下方的位置也會更改。

解決方案：

你必須按順序工作。 從頂部元素開始，然后向下移動。

變更清單：

我在 'one-google-bar' 上方放置了 'other-links'，因為就像我之前說的，我不知道你想把它放在哪里。 我假設您希望它位於頁面的頂部。
我從您的 css 中刪除了“其他鏈接”。 因為這個元素已經在頂部。
我對您的“one-google-bar”css 文件進行了一些更改。 變化如下：
- 我刪除了“位置：相對”。 因為您希望它與什么相關？
- 我假設你首先給它'margin-left：50％'，因為它沒有放在中間（因為圖像也有一些地方）你把它改成了'margin-left：42％'。
  那么有一個巧妙的技巧將元素放在中間：

邊距：0 自動；

這樣，您將頂部和底部邊距設置為 0。瀏覽器會自動設置左右邊距，使元素位於中間。
現在在它下面，隨意更改頂部和底部邊距。
我還將“最大寬度：10%”更改為：

寬度：適合內容；

不是使用最大寬度的正確方法。

2-您說您沒有意識到為什么在調整頁面大小時所有元素都會移動。
在您的“one-google-bar”中，您有：

邊距頂部：150px；

該 % 是發生這種情況的原因。 這意味着將當前寬度的 15% 添加到上邊距，並且由於您更改了寬度，因此它也會更改。 因此整個頁面移動（因為元素是按順序放置的......）。

解決方案：

只需使用 px 而不是 %。

變更清單：

我將 'margin-top: 15%' 更改為：

最高保證金：15%；

索引.html:

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <div id = "other-links">
            <a href="googleImage.html" class=google_image_page>Google Image Search</a>
            <a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
        </div>
        <div id="one-google-bar">
            <iframe id="backgroundImage" frameBorder = "0"
                src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </iframe>
       </div>
        <div id="form-div">
            <form action="https://google.com/search" class="form">
                <input type ="text" name="q"> <br><br>
                <input type ="submit" value="Google Search">
                <input type ="submit" value ="I'm Feeling Lucky">
            </form>
        </div>
        
    </body>
</html>

樣式.css：

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
  text-align: center;
  padding-top: 150px;
}
input[type="submit"] {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  border-radius: inhterit;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  padding-left: 25px;
  outline: none;
}

input[type="text"]:hover {
  border-color: #9dd9f3;
}

input[type="text"] {
  width: 385px;
  height: 25px;
  border-radius: 15px;
  outline: none;
}
.google_image_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

.google_advanced_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

/* #other-links {           //REMOVED
  margin-top: -40%;         //REMOVED
  margin-left: 80%;         //REMOVED
  margin-bottom: -85%;      //REMOVED
} */

#one-google-bar {
  /* position: relative;     //REMOVED       
  margin-left: 42%;          //REMOVED   
  margin-top: 15%;           //REMOVED           
  max-width: 10%;            //REMOVED       
  max-height: 10%;           //REMOVED  
  */
  width: fit-content;        /*ADDED*/                    
  margin: 0 auto;            /*ADDED*/                    
  /* margin-top: 15%;        //REMOVED*/
  margin-top: 150px;         /*ADDED*/   
}

調整頁面大小時的 Div 定位和定位 {Html}

問題描述

3 個解決方案

解決方案1
0 2021-01-03 12:14:09

解決方案2
0 2021-01-03 13:08:58

編輯：

解決方案3
0 已采納 2021-01-05 16:27:30

編輯：

調整頁面大小時的 Div 定位和定位 {Html}

問題描述

3 個解決方案

解決方案1 0 2021-01-03 12:14:09

解決方案2 0 2021-01-03 13:08:58

編輯：

解決方案3 0 已采納 2021-01-05 16:27:30

編輯：

解決方案1
0 2021-01-03 12:14:09

解決方案2
0 2021-01-03 13:08:58

解決方案3
0 已采納 2021-01-05 16:27:30