Question

我想制作一个像http://www.chacha.com这样的标题（不移动，大约那个宽度和高度，并且能够在其中包含div并且也必须是图像）

我开始使用空白的html文档和空白的css页面，所以我目前还没有编写任何代码。

我已经连续两天尝试这样做，所以我真的很感激任何人都可以提供帮助。

我有gimp所以如果有人也可以给我一个完美的标题和完美的背景尺寸的图像尺寸，我会更加欣赏它。

Answer 1

CSS：

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: url(yourimage.png) repeat-x;
}

<!--html -->
<div id="header"></div>

那应该给你一个起点，如果没有确切地看到布局应该是什么，我不能告诉你更多。

Answer 2

您要查找的CSS属性是position: fixed，它将相对于视口定位元素。这是定位的良好细分：https://developer.mozilla.org/en-US/docs/CSS/position

在这种特定的情况下，你得到的是一个大致沿着这些方向的样式的元素：

#header_id {
    position: fixed;
    width: 100%;
    height: 35px;
}

您不必设置高度，但除非固定元素中有内容，否则如果没有指定高度，它将会折叠。它们似乎也在元素上放置drop-shadow以获得整洁的浮动效果。

如果你想在里面放一个图片，你可以把<img>放在header元素中，或者将它用作CSS中的background-image url并用background-position定位它（另请参阅：https://developer.mozilla.org/en-US/docs/CSS/background-position，但如果您想对此属性执行过于特殊的操作，则底部的兼容性表很重要。）

您可以使用任何块级元素（或其上设置display:block的任何元素）执行此操作。在您的示例中，他们使用HTML5 <header>标记;如果<div>不适合您的网页，<header>也可以使用。

我建议将Firebug插件与Firefox（或类似的开发人员控制台与其他现代浏览器）一起使用 - 您可以右键单击页面上的元素并从下拉菜单中选择“检查元素”并获取两者的明细标记和样式，以了解如何构建其他网站。当你在浏览互联网并且看到某些内容时会非常有用并且认为，'这是一个巧妙的技巧，它是如何工作的？'

Answer 3

全宽固定标题

标头{ 宽度：100％; 背景：绿色; 高度：60像素; 保证金：-8px; 位置是：固定; }

FOR NONFULL WIDTH FIXED HEADER
创建一个div并设置宽度和高度（您也可以通过float:left, float:right向左或向右设置）然后在这个div中放置上面的代码但没有margin:-8px;并将宽度更改为div所具有的宽度。这是一个测试

如何制作始终保持在顶部的标题？

3 个答案: