<html>
<style>
body { background-color:#F1EEF2; }
header {
width:800px;
margin-left:auto;
margin-right:auto;
}
layout {
min-width: 100%;
min-height: 100%;
}
nav.header {
width:800px;
height:40px;
background-color:#000000;
color:#fef8f0;
}
nav.footer {
width:800px;
height:30px;
color:#fef8f0;
}
footer {
width:800px;
height:80px;
background:url(images/footer_beans.png) no-repeat #000000;
margin-left:auto;
margin-right:auto;
}
span {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#c29a5f;
}
p.s1 {
font-family: sans-serif;
font-size:15px;
color:#ffffff;
margin:0px;
padding:10px 24px 0;
}
p.s2 {
font-family: sans-serif;
font-size:15px;
color:#000000;
margin:0px;
padding:12px 10px 15px 12px;
}
ul.header {
width:500px;
margin:0;
padding:0;
padding-top:13px;
float:right;
list-style-type:none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
ul.footer {
width:500px;
float:right;
list-style-type:none;
margin: 0;
padding:0;
padding-top:47px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
li {
float:left;
font-size:11px;
font-weight:bold;
margin:0;
}
a {
padding:8px;
color:#fef8f0;
text-decoration:none;
}
section {
width:800px;
margin:0 auto;
}
article {
width:800px;
height:600px;
}
#left, #right {
background: #000000;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 10px;
}
#left { left: 265; }
#right { right: 265; }
#hm_topleft {width:434px; height:300px; float:left;}
#hm_topright {width:366px; height:300px; float:left; background:#570401; margin=0; overflow=hidden;}
#hm_content {width:800px; height:300px; margin:auto; float:left; background-color:#000000;}
#hm_contentbox {width:760px; height:130px; margin:25px; background:#F1EEF2; border:3px solid #000000;}
</style>
<div id="layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta charset=iso-8859-1>
<title>MAJID JORDAN - Home</title>
</head>
<body>
<header>
<nav class="header";>
<ul class="header">
<li><a href="#">Home</a>|</li>
<li><a href="#">Members</a>|</li>
<li><a href="#">Albums</a>|</li>
<li><a href="#">Gigs & Tours</a>|</li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
</header>
<section style="width:800px; margin:0 auto;">
<article style=" width:800px; height:600px; ">
<img src="C:Usersjorda_000.JORDAN-PCPicturesWebsitelogo.jpg" width="200" height="170" alt="MAJID JORDAN"/>
<div
style="
padding: 10px;
top: 10;
right: 480;
position: absolute;
z-index: 1;
visibility: show;
font-size:35px;">
<h1><center><font face="verdana"><strong>MAJID JORDAN</font></center</strong><h1>
</div>
<div id="hm_contentbox">
<p class="s2">Majid Jordan is a Canadian R&B duo, composed of singer Majid Al Maskati and producer Jordan Ullman. They are signed to OVO Sound, the record label co-founded by rapper Drake, producer Noah "40" Shebib and Oliver El-Khatib.
Jordan, originally from Toronto, and Majid, arriving in Toronto by way of Bahrain, met as students at the University of Toronto in 2011. Working between Ullman's dorm room and his parents' basement, they launched their first joint EP titled Afterhours on SoundCloud under their previous name Good People.</p>
</div>
<div
style="
position: absolute;
top: 390px;
right: 285px;
border: 3px solid black;">
<img src="C:Usersjorda_000.JORDAN-PCPicturesWebsitehome.jpg" width="400" height="300" alt="MAJID JORDAN"/>
</div>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:400;left:300;"><strong>
Members
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:480;left:300;"><strong>
Albums & Songs
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:560;left:300;"><strong>
Gigs & Tours
</button></strong>
<button style="border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:640;left:300;"><strong>
Gallery
</button></strong>
<footer style="position:absolute;top:710;>
<nav class="footer">
<ul class="footer">
<li class="hf1"><a>Members </a>|</li>
<li class="hf1"><a>Albums & Songs </a>|</li>
<li class="hf1"><a>Gigs & Tours </a>|</li>
<li class="hf1"><a>Gallery</a></li>
</ul>
</nav>
</footer>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
</html>在html方面，我是一个极端的初学者，我正在我选择的乐队上创建一个小网站，它在我用来创建网站的计算机上看起来非常好，但在另一台分辨率不同的计算机上，整个布局被搞砸了，对象重叠等。
任何帮助将不胜感激，就像我说的，我对这种语言很陌生，如果您需要更多信息，我会尽力为您提供帮助。
您当然可以编写自己的解决方案，但这就像重新发明轮子一样，对于初学者来说，这真的很困难。最常见的解决方案是使用CSS和/或JS框架，如bootstrap或angularmaterial。这不仅会为您提供工具，使您的网站几乎不费吹灰之力地响应，而且还有一些很酷的设计机会。你也不必担心被限制，因为你可以用自己的css代码"覆盖"框架中的一些东西。
对于某些教育，您可以查看此处：
http://getbootstrap.com/->获取引导程序（免费）
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/->一些解释来掌握您可以做什么
http://www.w3schools.com/bootstrap/default.asp ->一个写得很好的初学者友好教程
如果你还不相信，请查看这个：
http://www.w3schools.com/bootstrap/bootstrap_theme_band.asp如果您需要一些进一步的建议或有关特定问题的更多详细信息，请与我联系。