Question

<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:\Users\jorda_000.JORDAN-PC\Pictures\Website\logo.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:\Users\jorda_000.JORDAN-PC\Pictures\Website\home.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来说，我是一个极端的初学者，我正在我选择的乐队上创建一个小网站，它在我用来创建网站的计算机上看起来非常好，但在另一台带有不同的分辨率，整个布局混乱，物体重叠等。

任何帮助都会非常感激，就像我说的那样，我很熟悉这种语言，如果您需要更多信息，我会尽力帮助您。

Answer 1

你当然可以编写自己的解决方案，但这就像重新发明轮子一样，对于初学者来说真的很难。最常见的解决方案是使用CSS和/或JS Framework，如bootstrap或angularmaterial。这不仅可以为您提供工具，使您的网站快速响应，而且还有一些很酷的设计机会。您也不必担心被限制，因为您可以覆盖＆＃34;框架中的一些东西与您自己的CSS代码对于一些教育，你可以看这里：
http://getbootstrap.com/ - ＆gt;获取Bootstrap（它是免费的）
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ - ＆gt;一些解释，以掌握你能做什么 http://www.w3schools.com/bootstrap/default.asp - ＆gt;一个写得很好的初学者友好教程for bootstrap

如果您不相信，请查看以下内容：
http://www.w3schools.com/bootstrap/bootstrap_theme_band.asp
如果您需要一些有关具体问题的进一步建议或更多细节，请与我联系。

html - 在放大和更改分辨率时调整网站布局

1 个答案: