好的,所以我用外部 CSS 制作了一个简单的网页,现在它在我的计算机上看起来很好,但是当我将它发送给我的朋友时,底部按钮不在一起?
我的显示器 http://i.imgur.com/ektmF.png
好友监控 http://i.imgur.com/RmB3t.png
HTML 代码
<body>
<style type="text/css">
body {
overflow:hidden; <!-- Setting body overflow to hidden -->
}
<!-- Background image -->
</style>
<div id="backgroundWrapper">
<img src="background.png" />
</div>
<!-- Home button -->
<div id="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
</div>
<!-- Shop Button -->
<div id="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</body>
CSS 代码
#backgroundWrapper{width:100%;height:100%;z-index:-1;position:absolute;}
#backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
#homebtn {width:100%;height:100%;z-index:1; position:absolute;top:90%; left:35.3%;}
#shopbtn {width:100%;height:100%;z-index:1;position:absolute; top:90%; left:50%;}
#text {
color:black;
font-size:15;
text-align:center;
position:relative;
top:20%;
font-family:verdana;
font-weight:bold;
}
#myform {
position:absolute;
left:10%;
top:30%;
}
#submitbuttons {
position:relative;
text-align:center;
top:80%;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}