0

私は最近、1024 の解像度では見栄えが良いが、それ以上の解像度では台無しになる Web サイトを開発しました。おそらく確認する必要があるファイルへのリンクは次のとおりです:サイトのCSS 、メニュー バーの CSS。これは PHP ファイルですが、既に含まれている HTML ファイルにリンクしています。

クライアントがワイドスクリーンを持っている間、私は通常の 17 インチのスクリーンを持っています。彼女は、私が見ていない右側の余白を見ています。Web サイト viewlike.us を使用してさまざまな解像度でテストしたので、私はそれを見ただけです。比例してサイズを変更するにはどうすればよいですか？ありがとう。

4

2 に答える 2

0

通常、次のような構造があります。

<html>
   <head>...</head>
   <body>
      <div id="header-wrapper>
         <div id="header>
            <!-- header content here -->
         </div>
      </div>
      <div id="pageWrapper">
        <!-- all your content here -->
      </div>
   </body>
</html>

次に、ヘッダー用の画像と本文用の別の画像、またはヘッダー用の画像と本文用の背景色を設定できます。それはすべて、あなたが何をしているかにかかっています。

通常、背景画像はそれほど大きくありません。あなたが通常持っているのは、XまたはY、またはその両方で繰り返すことができる画像またはパターンです. CSS では、次のようなものを使用できます。

#headerWrapper {
    width:100%;
    height: 100px;
    background: url("/img/background.png") repeat-x;
}

これにより、画像はヘッダーで水平方向に繰り返されます。次に、ボディの別の背景、または背景色のみを設定できます。

繰り返しますが、それはあなたが達成しようとしていることに大きく依存します。

幸運を！！

于 2013-04-05T13:23:36.643 に答える
0

これは、本文を 1024 ピクセルに設定したためです。

body {
width:1024px;
background-image:url(images/top_background.jpg);
background-repeat:no-repeat;
background-color:#FFF;
}

通常は、サイズを 1024px に設定するページ ラッパーを作成します。

たとえば、これをhtmlで使用できます

<html>
   <head>...</head>
   <body>
      <div id="pageWrapper">
        <!-- all your content here -->
      </div>
   </body>
</html>

次に、css で次のようなものを作成できます。

#pageWrapper {
    width:1024px;
    margin: 0 auto;
}
于 2013-04-04T19:37:51.457 に答える