2015-11-17 147 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標題) 然後你可以定義高度和寬度的百分比給不同的標題元素。
希望我能幫上忙,祝你好運。