【发布时间】：2021-01-06 00:27:30
【问题描述】：
我是网络编程的初学者。我正在尝试克隆谷歌搜索页面。我实现了构建克隆网站的结构。
第一个问题
但是，我对 div 的定位有疑问。我正在使用表单类来搜索书面文本，并且我想在此表单上方添加带有特定边距的谷歌徽标图片。我使用 div 来划分页面来实现这一点。但是，当我更改 google 框架 div 位置时，所有 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%
}
【问题讨论】：