Question

这是我的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='#’><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>

输出： enter image description here

在缩小此网页时，背景和页脚图像对齐方式会发生变化。进行缩小后的输出为： enter image description here

我是网页设计的新手。我不知道为什么会这样？你能给出一些解决方案吗？

提前完成。

Answer 1

您可以尝试自举响应加载。它会让你的生活更轻松。

您面临的问题是硬编码像素值。你应该用％来尝试相对值。

Answer 2

由于您使用的是背景图片，因此无法做很多事情。这对于复制w / css3来说非常简单。

Answer 3

我是以img标签的样式添加min-width:100%;。它工作正常。

缩放网页时更改对齐

3 个答案: