2

我想创建一个具有三列背景的网站,其中中心列具有实际内容,侧面用于装饰。

它似乎是一个比较流行的设计(我经常在博客上看到它,但在很多网站上都看到了)。大多数 Tumblr 博客都是很好的例子,它们在中间有内容,在侧面有颜色。调整窗口大小时内容的大小不会改变,但侧面会改变。

我想做类似的事情,除了侧面由图像组成,使用 CSS。我想要一个具有有效三列的网站:一个在中间(固定宽度)由某个背景图像组成以保存内容(背景图像必须平铺以覆盖整个列,这是可以接受的,图像是这样设计的方式),以及中间内容列两侧的两列(也由背景中的平铺图像组成)。两侧栏必须是可调整大小的,并且图像必须随着页面的展开而平铺,而不改变中间内容栏的大小。问题是,我不知道如何解决这个问题(有很多关于如何创建三列布局的指南,但没有一个涵盖平铺图像的三列背景)。

4

3 回答 3

1

尝试以此为起点: http ://www.noupe.com/css/9-timeless-3-column-layout-techniques.html

于 2012-10-15T20:30:21.307 回答
0

如果两侧栏使用相同的平铺背景,那么我认为您可以使用background position来做到这一点。

以页面顶部中心为原点,在正文上设置平铺背景。

创建一个固定宽度居中的 div 作为您的内容列。也在 div 上设置平铺背景。

当你加宽窗口时,两边的平铺会增加,但因为你的平铺和 div 都居中,所以它们将继续很好地排列。

于 2012-10-15T20:45:50.467 回答
0

这个网站不使用 HTML5,但它是各种布局的绝佳初始资源:Layout Gala(好处是 HTML 保持不变,只是 CSS 发生了变化。缺点是除了布局骨架,您必须提供自己的 CSS。但是通过在适当的情况下使用页眉、页脚和部分标签将这些布局转换为使用 HTML5 很容易。)

于 2012-10-15T21:02:26.873 回答