【问题标题】:How to create a three-column website background using CSS?如何使用 CSS 创建一个三栏的网站背景?
【发布时间】:2012-10-16 05:02:26
【问题描述】:

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

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

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

【问题讨论】:

    标签: html css web


    【解决方案1】:
    【解决方案2】:

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

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

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

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

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        猜你喜欢
        • 2020-10-05
        • 2012-06-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-05-29
        • 2013-03-04
        • 2015-04-07
        • 2022-12-01
        相关资源
        最近更新 更多