调整页面大小时的 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