我自己编码和学习仍然很陌生。我非常感谢我能得到的任何帮助。谢谢!!
我正在试图弄清楚我需要改变什么，特别是我应该使用哪种单位来调整我的元素，以便在我调整浏览器窗口大小时它们不会移动。
PS：如果您发现任何空闲时间，请向我解释如何在大多数现代浏览器中使页面看起来一样？谢谢！
* {
padding: 0px;
margin: 0px;
}
/* BODY */
body {
background-image: url(curtain1.jpg);
background-position: 0 200px;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
/* HEADER 1 */
.headers h1 {
position: absolute;
text-align: center;
font-weight: bold;
font-style: normal;
font-size: 50px;
font-display: swap;
border-bottom: 1px solid black;
top: 7.5%;
left: 5%;
float: left;
padding-bottom: 5px;
}
/* HEADER 2*/
.headers h2 {
position: absolute;
text-align: center;
font-weight: 100;
font-style: normal;
font-display: auto;
font-size: 20px;
top: 15.5%;
left: 4.35%;
font-style: oblique;
float: left;
color: bisque;
width: auto;
letter-spacing: 3px;
}
/* LOGO */
.headers img {
display: block;
margin-left: auto;
margin-right: auto;
margin-left: -90px;
border: none;
width: 180px;
max-width: 160px;
max-height: 135px;
height: 135px;
background: #555;
position: absolute;
top: 4.5%;
z-index: 1000;
left: 50%;
right: 50%;
}
/* NAVIGATION BAR */
.navigationbar {
list-style:none;
position: absolute;
margin: 0 auto;
padding:0;
float:left;
top: 20.5%;
width: 1206.16px;
left: 50%;
margin-left: -600px;
min-width: 970px;
font-family: "Bungee Hairline", cursive;
border: 10px solid white;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
z-index: 1000;
}
.navigationbar li {
float:left;
margin:0 auto;
padding:0;
border-right: 1px solid white;
}
.navigationbar li a {
display:inline;
float:left;
width:auto;
height:auto;
overflow:hidden;
margin:0;
padding:9px 13px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-weight:bold;
font-size:24px;
font-style:normal;
color:#F2EFEF;
border-right:1px dotted #060606;
background:#222121;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#131212,0),color- stop(#222121,0.4),color-stop(#474646,0.8),color-stop(#3C3939,1));
background:-webkit-linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
background: -moz-linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
background: -o-linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
background: linear-gradient(top,#131212 0%,#222121 40%,#474646 80%,#3C3939 100%);
-moz-transition:0.5s ease-out;
-webkit-transition:0.5s ease-out;
transition:0.5s ease-out;
}
.navigationbar li a:hover, .navigationbar li a:active {
background-color: red;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#3047DB,0),color-stop(#3088DB,0.4),color-stop(#48AAE7,0.8),color-stop(#48BAE7,1));
background:-webkit-linear-gradient(top,red, 0%,red 40%,#red 80%,red 100%);
background: -moz-linear-gradient(top,#3047DB 0%,red 40%,red 80%,red 100%);
background: -o-linear-gradient(top,red 0%,red 40%,red 80%,red 100%);
background: linear-gradient(top,red 0%,red 40%,red 80%,red 100%);
color:#97410F;
-moz-transition:0.5s ease-in;
-webkit-transition:0.5s ease-in;
transition:0.5s ease-in;
border-right:1px solid transparent;
}
/* Phone Vector + Number */
#phoneimg {
position: absolute;
right: 5%;
top: 7.5%;
margin-right: 1.7%
}
#phonenumber {
position: absolute;
right: 5%;
top: 15%;
}
/* Body Content */
#blackbox {
width: 1206px;
height: 1000px;
color: black;
background-color: black;
position: absolute;
left: 50%;
right: 50%;
margin-left: -590px;
top: 23%;
z-index: -100;
} <!doctype html>
<html>
<head>
<!--This is the TAB Content-->
<title>XOXO - Exciting Companions</title>
<!--Link the CSS File here-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--Link Google Fonts here-->
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline|Crushed" rel="stylesheet">
</head>
<body>
<!-- PHONE VECTOR PHONE NUMBER-->
<div class="phonenr">
<div id="phoneimg">
<img src="iphonevector.jpeg" id="phone" style="height:50px;width:50px;"/>
</div>
<div id="phonenumber">
<p>+44 1234 567 89</p>
</div>
</div>
<div class="headers">
<!--LOGO XOXO-->
<div id="logo">
<img src="logo.jpg" alt="logo" height="115px" width="135px" />
<h1>XOXO</h1>
<h2>London Escorts</h2>
</div>
</div>
<!-- NAVIGATION MENU BAR-->
<div class="navigationbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">All Escorts</a></li>
<li><a href="#">Tonight's Escorts</a></li>
<li><a href="#">Bookings</a></li>
<li><a href="#">Price</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!--This is the HomePage Content Div-->
<div class="BodyContent">
<div id="blackbox"></div>
</div>
</body>
</html>