2

我是 CSS 新手，正在使用 CSS 从头开始​​设计我的第一个网站（我最近从上帝的爱中毕业，停止使用 html 来设计您的网站生活方式）。

我想创建一个页面，其中页眉和页脚超出正文的宽度，并从页面的左到右完成。我已经启动了代码，但我被卡住了。页眉将有一个徽标和导航（我还没有编写导航代码，但这并不难），页脚将只有一行内容。

我在其他问题中查找了示例，答案都非常复杂，并且涉及滚动条之类的东西，这比我想要的要多。

任何有关如何做到这一点的建议将不胜感激！对不起，如果这是一个愚蠢的问题。谢谢。

HTML

<body>

<!-- begin wrapper -->
<div id="wrapper">

<!-- begin header -->
  <div id="header">
    <p>Content</p>
  </div>

<!-- begin navigation -->
  <div id="navigation">
    <ol>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Contact</li>
    </ol>
  </div>

<!-- begin content -->
  <div id="content">
    <h1>Heading</h1>
    <p>Content</p>
  </div>

<!-- begin footer -->
  <div id="footer">
    <p>Content</p>
  </div>

</div>

</body>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

#header {
    background: #636769;
}

#navigation {
}

body {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 16pt;
    background: url(../images/texture.png);
}

#wrapper {
    width: 938px;
    margin: 0 auto;
    padding: 20px 20px;
    background: white;
}

#footer {
   background: #636769;
}
4

3 回答 3

3

如果您想要#header并#footer跨越整个页面，您还必须将它们移出#wrapper. 您可能还想指定高度，例如height: 40px.

您希望页眉和页脚在滚动时保持原位吗？如果是这样，请position: fixed;同时使用。然后，#header放在top: 0px; left: 0px; right: 0px;; 并#footer放上去bottom: 0px; left: 0px; right: 0px;。

你还有什么想做的，告诉我。我很乐意提供帮助。

于 2012-05-30T03:20:17.927 回答
2

由于您的 #wrapper 类包含整个页面，因此所有后续标签都将继承相同的值。如果您希望#header 或#footer 忽略这一点，那么您需要为这些类指定不同的值。尝试更改这些类以指定它们自己的宽度值（即width: 938px;），看看会发生什么。

于 2012-05-30T03:23:18.473 回答
0

将header和footerdiv 拉到外部wrapper以使其适合页面的宽度。

<body>

<!-- begin header -->
  <div id="header">
    <p>Content</p>
  </div>

<!-- begin wrapper -->
<div id="wrapper">

<!-- begin navigation -->
  <div id="navigation">
    <ol>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Contact</li>
    </ol>
  </div>

<!-- begin content -->
  <div id="content">
    <h1>Heading</h1>
    <p>Content</p>
  </div>

</div>

<!-- begin footer -->
  <div id="footer">
    <p>Content</p>
  </div>

</body>
于 2012-05-30T03:25:30.950 回答