2012-10-15 26 views
2

我想创建一个三列背景的网站,其中中央列有实际的内容,两侧是装饰。如何使用CSS创建三列网站背景?

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

我想做类似的事情,除了有图像的边,使用CSS。我想要一个有效的三列网站:一个在中间(固定宽度)由一个特定的背景图像组成的内容(背景图像必须覆盖整个列,这是可以接受的,图像设计为方式)以及中间内容列两侧的两列(也包含背景中的平铺图像)。两侧的列必须是可调整大小的,并且图像必须在页面展开时平铺,而不会更改中间内容列的大小。问题是,我没有太多的想法来解决这个问题(关于如何创建三个列布局有很多指导,但没有包含平铺图像的三列背景)。我将如何创建这样一个网站?

回答

0

如果两个边柱使用相同的瓷砖背景那么我认为你可以background position做到这一点。

用页面顶部中心的原点在身体上设置平铺背景。

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

当你拓宽窗口的时候,双方的平铺会增加,但是因为你的平铺和div都居中,那么它们会继续很好地排队。

0

本网站不使用HTML5,但它对于各种布局来说都是一个很好的初始资源:Layout Gala(好处是HTML保持不变,只是CSS发生了变化,缺点是除了布局-skeleton,则必须提供自己的CSS,但通过在适当的位置使用页眉,页脚和段标签,可以很容易地将这些布局转换为使用HTML5。)