Question

我最近开发了一个网站，在1024分辨率下看起来不错，但在更大的分辨率上搞砸了。以下是您可能需要查看的文件的链接：CSS for the site，CSS for the menu bar。这是一个PHP文件，但我已经链接到包含的HTML文件。

我有一个常规的17'屏幕，而客户端有一个宽屏幕。她看到右边的白色空间，我没有。我只是看到它，因为我使用了网站viewlike.us来测试不同的分辨率。我该怎么做才能调整比例？感谢。

Answer 1

这是因为您将主体设置为1024 px

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;
}

Answer 2

您通常有这样的结构：

<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;
}

这样，图像将在标题上水平重复。然后你可以为身体设置另一个背景，或者只为背景颜色设置。

同样，这很大程度上取决于你想要实现的目标。

祝你好运!!

我的网站在1024以上的分辨率下无法正常显示

2 个答案: