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>

出力:ここに画像の説明を入力

この Web ページをズームアウトすると、背景とフッターの画像の配置が変更されます。ズームアウト後の出力は次のとおりです。ここに画像の説明を入力

私はウェブページのデザインに非常に慣れていません。なぜこれが起こるのかわからない？いくつかの解決策を教えてください。

事前にサンクス。

4

4 に答える 4

1

ブーストラップレスポンシブロードを試すことができます。それはあなたの人生を楽にします。

あなたが直面している問題は、ハードコードされたピクセル値が原因です。相対値は % で試す必要があります。

于 2012-09-18T06:25:57.180 に答える
0

ページを縮小していますが、背景画像は無限ではありません。そのため、左側に空白が表示されます。背景を水平方向に繰り返すように CSS を調整できます。

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

また、幅が 1 ピクセルになるようにトリミングして、画像ファイルのサイズを縮小することもできます。背景は見た目は同じですが、ウェブサイトの読み込みが速くなります。

于 2012-09-18T22:18:28.027 に答える
0

min-width:100%;imgタグのスタイルで追加しました。それは働いていた。

于 2012-09-18T07:20:52.560 に答える
0

背景画像を使用しているため、多くのことはできません。ただし、css3 を使用して複製するのは非常に簡単な効果です。

于 2012-09-18T06:34:26.740 に答える