0

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

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

我现在已经连续两天尝试这样做了，所以我非常感谢任何人可以提供的任何帮助。

我有 gimp 所以如果有人能给我一个完美的标题和完美的背景尺寸的图像尺寸，我会更加感激。

4

3 回答 3

6

CSS：

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

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

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

于 2012-08-09T19:50:58.900 回答
1

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

在这种特定情况下，您所拥有的是一个样式大致如下的元素：

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

您不必设置高度，但除非固定元素中有内容，否则如果没有指定高度，它将折叠。他们似乎还drop-shadow为元素添加了一个整洁的浮动效果。

如果你想在里面放一张图片，你可以把<img>里面的 header 元素，或者用它作为background-imageCSS 中的 url 并定位它background-position（另见：https ://developer.mozilla.org/en-US/ docs/CSS/background-position虽然如果你想对这个属性做任何太具体的事情，底部的兼容性表很重要）。

您可以对任何块级元素（或任何带有display:block集合的元素）执行此操作。在您的示例中，他们使用的是 HTML5<header>标签；如果不适合您的页面， a<div>也会起作用。<header>

我建议将 Firebug 插件与 Firefox（或其他现代浏览器的类似开发人员控制台）一起使用——您可以右键单击页面上的元素并从下拉菜单中选择“检查元素”，然后查看标记和样式以查看其他网站的构建方式。当您浏览互联网并看到一些东西并想“这是一个巧妙的技巧，它是如何工作的？”时非常有用。

于 2012-08-09T20:00:16.510 回答
0

全宽固定接头

 header { 
    width:100%;
    background:green;
    height:60px;
    margin:-8px;
    position:fixed;
}

对于非全宽固定标题
创建一个 div 并设置宽度和高度（您也可以将其设置为向左或向右float:left, float:right）然后在此 div 中将代码放在上面但没有margin:-8px;并将宽度更改为您的 div 具有的宽度。这是一个测试

于 2014-08-23T15:48:20.813 回答