0

我在 Photoshop 中设计了一个我想实际开发的网站。我以http://illinoisstate.edu为网站建模。基本上，我想要顶部渐变标题、中间图像和漂浮在顶部的内容。我尝试了几种不同的方法来处理各种 CSS 样式和位置类型，但我似乎无法获得正确的效果。我尝试研究甚至下载该站点以查看他们是如何做到的，但没有运气。有谁知道如何达到这种效果？

这个链接http://dev.connectionsquad.com显示了我所拥有的。我希望那个讨厌的彩色 div 覆盖在背景 div 之上，但是当你缩小窗口的大小时，我希望背景消失并且只关注内容。

4

2 回答 2

1

在 body 标记内创建一个 div 来包含您的背景（比如说， ）。用相对位置定位它并定义它的宽度和最小高度。在其中，使用其他 div 放置您想要的不同效果。使用位置定位这些 div。然后，在 body 内部但在第一个 div 之外创建第二个 div。定位它并将内容放在这个div中。

它看起来像这样：

<body>
    <div class="background_wrapper">
        <div class="header"></div>
        <div class="midle_image"></div>
    </div>
    <div class="content_wrapper">
        More divs...
        content...
    </div>
</body>

编辑： 使用 CSS 中的位置来调整第一个包装器、标题、图像和第二个包装器。我个人会使用 position:relative 作为内容包装器，使用 position:absolute 作为背景包装器

于 2012-07-25T02:02:36.367 回答
0

我的理解是“中间的图像”是身体的背景图像。他们将背景图像的 y 位置调整为 232px 以使其从顶部偏移。对于浮动效果，为 id 为“body”的 div 指定了 box-shadow。

我不确定你问题的第二部分。如果您能详细说明“彩色 div”的含义，那将有所帮助。我使用 firebug 来查看代码和 css 内部。如果您还没有尝试过，您可能也想这样做。希望这可以帮助。

于 2012-07-25T01:58:57.473 回答