Question

我设计的CSS模板由四部分组成： -

标题
侧面导航
主要内容
页脚

侧面导航＆amp;主要内容将沿着彼此（25％，75％）宽度呈现。

我的问题是，这两个部分是应该放在另一个容器中，还是应该放在与标题和放置相同级别的页面上？页脚？

Answer 1

根据您的要求（现在看起来非常简单）。您可以同时执行这两项操作，因此我认为您应该最小化标记并将它们设置为与页眉和页脚相同的级别。

以下是您可以执行的操作示例：

<header></header>
<nav></nav>
<main></main>
<footer></footer>

CSS：

header, footer {
    height: 200px;
    background:green;
    clear:both;
}
nav, main {
    float:left;
    width:25%;
    height:500px;
    background:gold;
}
main {
    width:75%;
    background:red;
}

Answer 2

侧栏和导航可以在他们自己的容器中以这种方式向下，与页眉和页脚位于同一级别。

<强> HTML

<div class="container">
    <div class="sidebar">
    </div>
    <div class="main-content">
    </div>
</div>

<强> CSS

.container {
    width:100%
}
.sidebar {
    float:left;
    width:25%
}
.main-content {
    float:left;
    width:75%;
}

或者它们都可以与页眉和页脚位于同一级别，如下所示（但如果一个内容没有其他内容那么多可能有问题，可以使用clear:both修复）：

<强> HTML

<div class="sidebar">
</div>
<div class="main-content">
</div>

<强> CSS

.sidebar {
    float:left;
    width:25%
}
.main-content {
    float:left;
    width:75%;
}

Answer 3

你应该使用相同的级别。你想通过CSS实现的目标是什么，这些部分应该简单而合乎逻辑。太多的嵌套会造成混乱，并且使得编写正确的CSS变得更加困难。这是一些HTML示例：

<html>
    <head>
        <title>My website</title>
        <!-- And the rest of the head stuff, including a link to your CSS -->
    </head>
    <body>
        <header>
            <h1>My website</h1>
            <nav id="headnav">
                <ul>
                    <li>Login</li>
                    <li>About</li>
                </ul>
            </nav>
        </header>
        <nav id="mainnav">
            <ul>
                <li>First page</li>
                <li>Second page</li>
                <li>Third page</li>
            </ul>
        </nav>
        <main>
            <h2>Main content</h2>
            <p>This is some main content text.</p>
        </main>
        <footer>
            <p>Copyright and cookies and bears, oh my...</p>
        </footer>
    </body>
</html>

然后使用CSS将内容放在您想要的位置。任何多余的标签都应该被剥离掉。这里有一些与HTML一起使用的CSS：

header {
    clear: both;
    width: 100%;
}

nav#mainnav {
    width: 25%;
    float: left;
}

main {
    width: 75%;
}

footer {
    clear: both;
    width: 100%;
}

CSS构建模板

3 个答案: