0

我为我的网站准备了一个布局：http: //imgur.com/RsAFgyz 问题是，我不知道如何使中心条位于导航栏后面，保持在页面中间（即使在缩放时)，甚至以正确的方式出现。有人可以指导我学习教程，或者告诉我怎么做吗？这是我的完整代码： http: //jsfiddle.net/c7r6g/（我已将导航栏设置为图像文件，如果您没有注意到）导航栏是.rounded，而我要居中的 div 是#centerstrip

抱歉，如果这有点含糊，我是 CSS 的业余爱好者（尤其是定位。）

4

6 回答 6

1

查看CSS z-index 属性。有了它，您可以定义将哪个元素放在另一个元素之上。

如果您将其添加到您的 样式中#centerstrip，它将显示在导航栏下方。

#centerstrip {
    position: absolute;
    z-index: -1;
    top: 0px;
}
于 2013-10-19T20:03:39.670 回答
0

我通常将正文中的所有内容都包裹在一个 div 中，然后将 div 居中。body 元素的宽度自然会等于您的浏览器窗口的宽度，因此如果您的 body 标签内的第一个标签是一个 div，并且您将该 div 居中，它将以 body 为中心，从而以窗口为中心。这是一些示例代码：

<!doctype HTML>
    <html>
        <head>
            <meta lang="en" charset="utf-8" /> 
            <title>Sample</title>
        </head>
        <body>
            <div id="container">
            </div>

            <style>
                body{
                    background-color: red;
                }
                #container{
                    height: 400px;
                    width: 400px;
                    margin-left: auto;
                    margin-right: auto;
                    background-color: blue;
                } 
            </style>

        </body>
    </html>

诀窍是使用margin-left: auto;and margin-right: auto;，并确保您将该样式放在 div 上。你不能把那种风格放在身体上，因为身体没有任何东西可以参考它来进行居中。然而，一个 div 可以相对于 body 的宽度居中

于 2013-10-19T21:25:46.393 回答
0

由于您的导航栏是您内容的一部分，您所要做的就是让它向外延伸，这可以通过使其宽度大于 100% 来完成。这将使其扩展到主要内容的右侧。

要将其向左移动，您有两种选择，它们都有各自的优点： 1. 使用相对位置和负左值将导航栏向左移动。2. 在左侧使用负边距。

这将允许您避免使用 z-index，因为导航栏是中心条的一部分，这可能不会有成效。

于 2013-10-19T20:08:57.073 回答
0

在你的 CSS 中进行了更改，这在你的小提琴中工作正常，用这个替换你的小提琴。

#centerstrip {
    background-color: #bbbbbb;
    height: 100%;
    width: 50%;
    display: block;
    margin:auto;
    z-index: -1;
}

这样，您的 div 将与中心对齐，并且您的 div 也将位于导航栏下方。

于 2013-10-19T20:13:32.933 回答
0

我可以推荐使用

.property{
   z-index: 10;
}

其中数字表示 az 类似数组的位置中的最高元素。

此外，如果您希望它在不同的分辨率和缩放下保持相同的方式，请尝试响应式设计。

如果您打算进入响应式设计，我也建议您看看一些非常好的框架，例如引导程序或基础。

于 2013-10-20T00:23:11.483 回答
0

稍微扯一扯，给你。我设法在 CSS 中呈现您的链接图像。

虽然我只使用 div，但概念是相同的。

http://jsfiddle.net/jqarz/1/

代码如下。

需要探索的几个概念是宽度、边距和填充。重要的是要注意宽度实际上是“内容框的宽度”而不是元素的宽度，就像许多网站对它的描述不佳一样。

有很多方法可以做到这一点，这只是其中一种，它真的取决于你想要做什么以及用什么。

HTML：

<div id="background">

    <div id="navbar">navbar</div>
    <div id="content"></div>    

</div>

CSS：

#background
{
    z-index: 0;
    padding: 15px 15px;
    width: 600px;
    height: 800px;
    background-color: #CFF;
    border-style: solid;
    border-width: 1px;
}

#content
{
    z-index: 1;
    border-style: solid;
    border-width: 1px;
    margin: 0 auto;
    width: 90%;
    height: 800px;
    background-color: #FFC;
}

#navbar
{ 
    top: 150px;
    position: absolute;
    z-index: 2;
    width: 600px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    height: 100px;
    background-color: #FCF;
    text-align: center;
    font-size: 4em;
}
于 2013-10-19T21:53:09.923 回答