Html 网页底部的大空间
我已经为一个大学项目制作了我的第一个网页,当它呈现时,页面底部有一个巨大的空间,从其他地方看,我已经确定这是因为我对所有元素都使用了巨大的填充,但是有没有快速修复来删除这个空间?或者甚至是一种方法来重新写它,并把它都放在同一个地方,谢谢 代码如下:Html 网页底部的大空间,html,Html,我已经为一个大学项目制作了我的第一个网页,当它呈现时,页面底部有一个巨大的空间,从其他地方看,我已经确定这是因为我对所有元素都使用了巨大的填充,但是有没有快速修复来删除这个空间?或者甚至是一种方法来重新写它,并把它都放在同一个地方,谢谢 代码如下: <!DOCTYPE html> <html> <head> <style> body {background-image:url('bckground.png');}
<!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>
正文{背景图像:url('bckground.png');}
p、 菜单文本{
填充顶部:250px;
文本对齐:居中;
位置:相对;左侧:-55px;
空白:nowrap;
}
p、 jscript
{
左侧填充:250px;
位置:相对;顶部:-25px;
}
p、 顶级产品
{
左侧填充:222px;
位置:相对;顶部:-120px;
}
p、 箭头边框
{
位置:相对;顶部:-640px;
左侧填充:175px;
}
p、 甲板拇指1
{
左侧填充:210px;
位置:相对;顶部:-699px;
}
p、 甲板拇指2
{
左侧填充:408px;
位置:相对;顶部:-970px;
}
p、 甲板拇指3
{
左侧填充:605px;
位置:相对;顶部:-1243px;
}
p、 甲板拇指4
{
左侧填充:800px;
位置:相对;顶部:-1516px;
}
p、 信息
{左侧填充:300px;
位置:相对;顶部:-1500px;
}
旋风分离器
旋风滑板
有限公司
霍姆斯街1号,
牛津大学
英国牛津郡,
OX25 7PJ
为正文或html提供填充底部:200px
或
为正文或html提供
margin-bottom:200px
。有一种快速的方法,但最好使用CSS检查工具,如Firefox浏览器的firebug,以准确了解发生了什么
然后只需删除或修改特定的CSS规则(firebug将显示要更改的CSS文件和行)。额外的空间来自使用相对定位移动的所有元素 移动元素的方式只会改变它们的显示位置,它们仍然会在原始位置占据空间 使用绝对定位或负边距使元素重叠,而不会在页面底部累积空间 您可以使用
float:left
使元素排列在一起。更改css:
p.info
{
padding-left:300px;
position:relative;
}
学习CSS定位您有
p.info{左填充:300px;位置:相对;顶部:-1500px;}
从此中删除top
CSS规则并重试。事实上,你已经为大多数DOM设置了顶级css规则,请删除这些规则,然后看..是的,我同意Alien先生的观点,你真的应该从css开始。它让你的代码更加直观。如果你在jsbin.com这样的网站上有一个演示会很有帮助。此外,
标记的语言
属性不再需要。感谢您为我提供我需要使用的内容,我将使用绝对定位。