2015-11-17 100 views
1

我是新来的编程,使我的大学任务的第一个网站,它似乎当我放大我的网站上的一切冲突在一起的任何帮助将非常感激!HTML - 放大,需要帮助

The image at 67% zoom.

The image at 100% zoom

代码我使用:在创建网站上使用

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="w3.css"> 
 
\t \t \t \t \t \t <style> 
 
\t \t \t \t \t \t \t div.relative { 
 
\t \t \t \t \t position: relative; 
 
\t \t \t \t \t left: 5px; 
 
\t \t \t \t \t top: 115px; 
 
\t \t \t \t \t \t border: 0px solid #73AD21; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t \t </style> 
 
<style> 
 
a { 
 
    color: Black; 
 
} 
 
</style> 
 
\t <title>The Steakhouse</title> 
 
\t \t <style> 
 
\t \t body { 
 
    background-image: url("Backgroundlol.jpg"); 
 
\t background-size: 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
<div> 
 
h1 { 
 
    position: center; 
 
    left: 640px; 
 
    top: 15px; 
 
} 
 
</div> 
 
</style> 
 
<div> 
 
<center> 
 
<DIV style="position: absolute; top:100px; left:800px; width:500px; height:25px"> <center> <font size="7" face="Agency FB"> <b> The Steakhouse! </b> </font> <br> <b> Why don't you up the steaks a little?! </b> </center></DIV> 
 
\t <a href="Homepage.html"><IMG STYLE="position:absolute; TOP:5px; LEFT:2px; WIDTH:280px; HEIGHT:290px" SRC="steakhouse logo.png"></a> 
 
\t <IMG STYLE="position:absolute; TOP:5px; LEFT:400px; WIDTH:250px; HEIGHT:240px" SRC="a_burned.png"> 
 
\t <IMG STYLE="position:absolute; TOP:5px; LEFT:1450px; WIDTH:250px; HEIGHT:250px" SRC="NRA1.png"> 
 
\t \t \t \t \t \t 
 
\t <a href="http://www.facebook.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:675px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="facebook.png"> </a> 
 
\t <a href="http://www.instagram.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:775px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="instagram.png"> 
 
\t <a href="http://www.twitter.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:875px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="twitter.png"> 
 
\t 
 
\t <ul> 
 
\t </div> 
 
\t <DIV style="position: absolute; top:300px; left:-380px; width:1000px; height:25px"> <center> <ul> 
 
<font face="Agency FB" size="25" <li>LINKS:</li> </font> <br> 
 
    <font face="Agency FB" size="25" <li><a href="About Us.html">About Us</a></li> </font> <br> 
 
    <font face="Agency FB" size="25" <li><a href="Contact.html">Contact</a></li> </font> <br> 
 
    <font face="Agency FB" size="25" <li><a href="Reservation.html">Reservation</a></li> </font> <br> 
 
    <font face="Agency FB" size="25" <li><a href="Awards.html">Awards</a></li> </font> <br> 
 
</ul> </center> </DIV> 
 
<DIV style="position: absolute; top:765px; left:1000px; width:500px; height:25px"><h1> Recent News:</h1></DIV> 
 
<DIV style="position: absolute; top:825px; left:890px; width:500px; height:25px"><H3>WEBSITE NOW OFFICIALLY LAUNCHED!</H3></DIV> 
 
</head> 
 
<body> 
 
</body> 
 
</html>

+0

'

'是古老的,使用一些现代技术。欢迎使用stackoverflow;) – www139

+0

原因是你正在使用像素值。尝试将其中一些改为百分比。没有理由在每件事上都使用'position:absolute;'。 – www139

+0

对于第一个网站来说不错,但我认为如果你想解决这个问题,你需要重做它。以下是您的一些链接https://developer.mozilla.org/en-US/docs/Web/CSS/percentage https://developer.mozilla.org/en-US/docs/Web/CSS/position http: //www.w3schools.com/tags/tag_font.asp – www139

回答

0

答案很简单,元素相信在那里像素固定天气情况变化与否。
如果你想制作一个更加动态的网站,可以在各种分辨率下工作(假设所有的都在计算机标准的范围内,比如手机不小) 将网页细分为核心元素,例如页眉,正文,页脚
根据可用屏幕的百分比
为ex创建元素,如果侧栏占据身体的20%,则不管行为相对的情况如何。
提示:创建一个主要元素并修复它的高度(可以说是300px标题) 然后你可以定义高度和宽度的百分比给不同的标题元素。
希望我能帮上忙,祝你好运。