1

这是我的 HTML 文件

<html>
<head>

<style type="text/css">
body
{
background-image: url(Images/android_background.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>

<div class="wrapper">

<div id='cssmenu' style="position:relative;   top:100px; ">
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#’&gt;<span>Android</span></a>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>extra</span></a></li>
</ul>
</div>

<center>

<table  border="1" style="position:relative; top:200px; "> 
<tr><td> Under Construction </td> </tr> 
<tr><td> Under Construction </td> </tr>  
<tr><td> Under Construction </td> </tr>   
<tr><td> Under Construction </td> </tr>
<tr><td> Under Construction </td> </tr>  
<tr><td> Under Construction </td> </tr>  
<tr><td> Under Construction </td> </tr>  
<tr><td> Under Construction </td> </tr>
</table>

</center>

<div class="push"></div>


</div>


<div class="footer" style=" position:relative; top:300px;" >
<img src="android/Images/home_background.png" />
</div>


</body>
</html>

输出 ：在此处输入图像描述

缩小此网页时，背景和页脚图像的对齐方式已更改。缩小后的输出为：在此处输入图像描述

我对网页设计很陌生。我不知道为什么会这样？你能给出一些解决方案吗？

提前谢谢。

4

4 回答 4

1

你可以试试 boostrap 响应式负载。它会让你的生活更轻松。

您面临的问题是由于硬编码的像素值。您应该尝试以百分比表示的相对值。

于 2012-09-18T06:25:57.180 回答
0

由于您使用的是背景图像，因此您无能为力。这是一个很容易复制 w/css3 的效果。

于 2012-09-18T06:34:26.740 回答
0

我被添加min-width:100%;了 img 标签的样式。它正在工作。

于 2012-09-18T07:20:52.560 回答
0

您正在缩小页面，但您的背景图像并非无穷无尽，这就是您可以看到左侧空白区域的原因。您可以调整 CSS 以水平重复背景：

body {
  background-image: url(Images/android_background.png);
  background-repeat: repeat-x;
}

您还可以通过将图像文件裁剪为仅 1 px 宽来减小图像文件的大小。您的背景在视觉上将是相同的，但网站的加载速度会更快。

于 2012-09-18T22:18:28.027 回答