網頁底部的大空間

我爲大學項目製作了我的第一個網頁，當它呈現時，頁面底部有一個巨大的空間，從閱讀其他地方我已經確定這是因爲巨大的填充我一直在使用我的所有元素，但有沒有快速修復刪除這個空間？甚至是一種重新編寫它的方法，並將它們放在同一個地方，謝謝！網頁底部的大空間

的代碼如下：

 <!DOCTYPE html> 

<html> 

<head> 

<style> 



body {background-image:url('bckground.png');} 




p.menutext { 
      padding-top:250px; 
    text-align:center; 

      position:relative;left:-55px; 
      white-space:nowrap; 
    } 
p.jscript 
{ 
padding-left:250px; 
position:relative;top:-25px; 
} 

p.topproducts 
{ 
padding-left:222px; 
position:relative;top:-120px; 
} 



p.arrowborder 
{ 
position:relative;top:-640px; 
padding-left:175px; 
} 

p.deckthumb1 
{ 
padding-left:210px; 
position:relative;top:-699px; 
} 
p.deckthumb2 
{ 
padding-left:408px; 
position:relative;top:-970px; 
} 
p.deckthumb3 
{ 
padding-left:605px; 
position:relative;top:-1243px; 
} 
p.deckthumb4 
{ 
padding-left:800px; 
position:relative;top:-1516px; 
} 

p.info 
{padding-left:300px; 
position:relative;top:-1500px; 
} 


</style> 



<script language="JavaScript1.1"> 

<!-- 





var slideimages=new Array() 

var slidelinks=new Array() 

function slideshowimages(){ 

for (i=0;i<slideshowimages.arguments.length;i++){ 

slideimages[i]=new Image() 

slideimages[i].src=slideshowimages.arguments[i] 

} 

} 



function slideshowlinks(){ 

for (i=0;i<slideshowlinks.arguments.length;i++) 

slidelinks[i]=slideshowlinks.arguments[i] 

} 



function gotoshow(){ 

if (!window.winslide||winslide.closed) 

winslide=window.open(slidelinks[whichlink]) 

else 

winslide.location=slidelinks[whichlink] 

winslide.focus() 

} 



//--> 

</script> 


</head> 


<body> 




<div id="mainside"> 
<p class="menutext"> 

<a href="Index.html"><img src="homebutton.png" border="0" alt="" 

width="80 height="50"/></a><a href="skateboards.html"><img 

src="skateboardsbutton.png"border="0" alt="" width="222 

height="65"/></a><a href="accessories.html"><img 

src="accessoriesbutton.png"border="0"alt=""width="215 

height="40"/></a><a href="help.html"><img src="helpbutton.png"border="0" 

alt="" width="100"height="59"/></a> 
</p> 
</div> 




<p class="jscript"> 
<a href="javascript:gotoshow()"><img src="food1.jpg" 
name="slide" border=0 width=800 height=450></a> 


<script> 

<!-- 






slideshowimages 

("slideshow1.png","slideshow2.png","slideshow3.png","slideshow4.png") 

slideshowlinks 
("skateboards.html","skateboards.html","skateboards.html","accessories.h 

tml") 



//configure the speed of the slideshow, in miliseconds 
var 

slideshowspeed=2000 



var whichlink=0 

var whichimage=0 

function slideit(){ 

if (!document.images) 

return 

document.images.slide.src=slideimages[whichimage].src 

whichlink=whichimage 

if (whichimage<slideimages.length-1) 

whichimage++ 

else 

whichimage=0 

setTimeout("slideit()",slideshowspeed) 

} 

slideit() 



//--> 

</script> 



</p> 

<p class="topproducts"> 
<img src="topproducts.png" border="0" alt="" width="830 height="50"/> 
</p> 
<p class="arrowborder"> 
<img src="arrowborder.png" border="0" alt="" width="880" height="490"/> 
</p> 


<div id="mainside"> 
<p class="deckthumb1"> 
<img src="indexdeckthumb1.png" border="0" alt="" width="250" 

height="250"/> 
</p> 
<p class="deckthumb2"> 
<img src="indexdeckthumb2.png" border="0" alt="" width="250" 

height="250"/> 
</p> 
<p class="deckthumb3"> 
<img src="indexdeckthumb3.png" border="0" alt="" width="250" 

height="250"/> 
</p> 
<p class="deckthumb4"> 
<img src="indexdeckthumb4.png" border="0" alt="" width="250" 

height="250"/> 
</p> 

</div> 


<div> 
<p class="info"> 
<font face="herculanum" color="#518087" size="3"> 
CYCLONE <br> 
Cyclone Skateboards <br> 
Ltd. <br> 
1 Holmes Street,<br> 
Oxford <br> 
Oxfordshire, England,<br> 
OX25 7PJ <br> 
</font> 
</p> 
</div> 



</body> 

</html>

來源

2013-04-29 Lucas Holmes

瞭解CSS定位 – 2013-04-29 09:09:32

你'p.info {填充左：300像素; position：relative; top：-1500px; }'從這裏刪除'top'css規則並嘗試。事實上，你有頂級CSS規則設置爲大多數DOM刪除這些，看到.. – 2013-04-29 09:09:41

是的，我同意先生阿里恩，你真的應該開始與CSS。它爲您的編碼提供了更多的可見性。 – 2013-04-29 09:11:16

額外的空間來自您使用相對定位移動的所有元素。

移動元素的這種方式只在顯示它們的位置發生變化，它們仍佔用原始位置的空間。

使用絕對定位或負邊距使元素重疊，而不會在頁面底部累積空間。您可以使用float:left使元素排列在彼此的旁邊。

來源

2013-04-29 09:11:28 Guffa

感謝您提供我需要使用的內容，我將使用絕對定位。 – 2013-04-29 09:15:11

padding-bottom:200px給出對身體或HTML。

或

給margin-bottom:200px對身體或HTML。

來源

2013-04-29 09:10:16 HasanAboShally

有一個快速的方法，但最好使用Firefox瀏覽器的firebug等CSS檢查工具來查明究竟發生了什麼。

然後它只是刪除或修改該特定的CSS規則（螢火蟲會告訴你哪個css文件和行改變）的問題。

來源

2013-04-29 09:11:09 dzumla011

改變CSS：

p.info 
{ 
padding-left:300px; 
position:relative; 
}

來源

2013-04-29 09:14:15 Sachin

網頁底部的大空間

回答

相關問題