我想制作一个像http://www.chacha.com这样的标题(不动,大约那么宽和那么高,并且能够在其中放置 div,并且还必须是图像)
我从一个空白的 html 文档和一个空白的 css 页面开始,所以我目前还没有编写任何代码。
我现在已经连续两天尝试这样做了,所以我非常感谢任何人可以提供的任何帮助。
我有 gimp 所以如果有人能给我一个完美的标题和完美的背景尺寸的图像尺寸,我会更加感激。
我想制作一个像http://www.chacha.com这样的标题(不动,大约那么宽和那么高,并且能够在其中放置 div,并且还必须是图像)
我从一个空白的 html 文档和一个空白的 css 页面开始,所以我目前还没有编写任何代码。
我现在已经连续两天尝试这样做了,所以我非常感谢任何人可以提供的任何帮助。
我有 gimp 所以如果有人能给我一个完美的标题和完美的背景尺寸的图像尺寸,我会更加感激。
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
这应该给你一个起点,如果没有确切地看到布局应该是什么,我不能告诉你更多。
您正在寻找的 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-image
CSS 中的 url 并定位它background-position
(另见:https ://developer.mozilla.org/en-US/ docs/CSS/background-position虽然如果你想对这个属性做任何太具体的事情,底部的兼容性表很重要)。
您可以对任何块级元素(或任何带有display:block
集合的元素)执行此操作。在您的示例中,他们使用的是 HTML5<header>
标签;如果不适合您的页面, a<div>
也会起作用。<header>
我建议将 Firebug 插件与 Firefox(或其他现代浏览器的类似开发人员控制台)一起使用——您可以右键单击页面上的元素并从下拉菜单中选择“检查元素”,然后查看标记和样式以查看其他网站的构建方式。当您浏览互联网并看到一些东西并想“这是一个巧妙的技巧,它是如何工作的?”时非常有用。
全宽固定接头
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
对于非全宽固定标题
创建一个 div 并设置宽度和高度(您也可以将其设置为向左或向右float:left, float:right
)然后在此 div 中将代码放在上面但没有margin:-8px;
并将宽度更改为您的 div 具有的宽度。这是一个测试