1

我快疯了。我正在使用 960 网格系统创建一个网站，到目前为止一切正常 - 我确实理解它。我唯一的问题是以下，由于框架本身限制为 960 像素，我不明白如何使网站自动适应各种屏幕分辨率。这就是我的意思：我创建了一个两侧都有重复图案的网站，所以我不想让它以 960 像素结束，我希望左侧和右侧的图案能够重复。我在网站的三个不同部分有三种不同的模式。示例网站是：

http://www.assistly.com/
http://secondandpark.com/

这是一个非常基本的问题，我试图用 div 解决它，但找不到解决方案。

<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960_24_col.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/demo.css" />
</head>
<body>

<div class="container_24">
<div id="header">
<div class="grid_1"></div>
<div class="grid_22">
<img src="images/main_header.jpg"></div>
<div class="grid_1 alpha"></div>
</div>   
<!-- End of Main Header -->
<div class="clear"></div>
<div class="grid_1">
</div>
 <div class="grid_22">
<img src="images/divider.jpg">
  </div>
<div class="grid_1">
</div>   
<!-- End of Divider -->
<div class="clear"></div>
<div class="grid_1">
</div>   
<div class="grid_2">
<img src="images/left_shadow.jpg">
</div>
<div class="grid_18">
</div>
<div class="grid_2">
<img src="images/right_shadow.jpg">
</div>   
<div class="grid_1">
</div>   
<!-- End of left right shadow -->
<div class="clear"></div>
<div class="grid_2 alpha">
</div>
 <div class="grid_20">
<img src="images/bottom.jpg">
  </div>
<div class="grid_2 omega">
</div>   
<!-- End of Bottom -->

<div class="clear"></div>
</div>
<!-- End of Container -->

</body>
</html>

请注意，我对标题和分隔符使用不同的模式。

谢谢你的帮助。

约翰

4

1 回答 1

0

我将标题 ID 放在 960 网格之外

<div id="header"> 

<div class="container_12"> 

    <div class="grid_2"><img src="#" alt="#"></div> 
    <div class="grid_10"><p class="subtitle">#</p></div> 

    <div class="clear"></div> 
</div> 
</div>

然后在你的 CSS

#header {
background: #686868 url(../images/bg_header.jpg); }

所以我的标题 ID 是全宽的，网格在里面

于 2011-07-08T15:55:38.487 回答