CSS：页面顶部的细横幅（如本页的橙色横幅）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1572701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Thin banner on top of page (like the orange one on this page)
提问by JD Isaacks
I need to put a thin banner on the top of the page kinda like the orange notification one on this page. I need it to be absolutely positioned though, because when you click on it it needs to drop down (over the current page, not pushing the current page down). The banner needs to stretch the entire width of window but the content needs to be within 800px in the middle. I have it already made but I am having trouble with the CSS positioning of it.
我需要在页面顶部放一个薄横幅，有点像此页面上的橙色通知。我需要它绝对定位，因为当你点击它时它需要下拉（在当前页面上，而不是将当前页面向下推）。横幅需要拉伸整个窗口的宽度，但内容需要在中间 800 像素以内。我已经完成了，但是我在 CSS 定位方面遇到了问题。
Thanks!!
谢谢！！
回答by Olly
Below is an example. The main #bannerelement stretches the full screen and is pinned to the top of the viewport using position: absolute; top: 0; left: 0. The width: 100%makes it stretch the full width.
下面是一个例子。主要#banner元素拉伸全屏并使用 固定到视口的顶部position: absolute; top: 0; left: 0。这width: 100%使它拉伸整个宽度。
The #banner-contentis where you put your content. This is centered and fixed at 800px in width. I've put a border around it so you can see.
这#banner-content是您放置内容的地方。这是居中并固定在 800px 的宽度。我在它周围放了一个边框，所以你可以看到。
Note: I've also 'reset' the margins and padding of all the elements to clear the default padding. You might want to use something like Eric Meyer's Reset CSSin your final application.
注意：我还“重置”了所有元素的边距和填充以清除默认填充。您可能希望在最终应用程序中使用 Eric Meyer 的Reset CSS 之类的东西。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #DDEEEE;
width: 100%;
}
div#banner-content {
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
}
div#main-content {
padding-top: 70px;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner-content">
This is your banner text, centered and fixed at 800px in width
</div>
</div>
<div id="main-content">
<p>Main page content goes here</p>
</div>
</body>
</html>
回答by the_e
#banner {
position: absolute;
top: 0px;
left: 0px;
margin: 0 auto;
text-align: center;
}
#banner_contents {
width: 800px;
}
Should be as simple as making two divs...the main one wraps the content one and centers it.
应该像制作两个 div 一样简单……主要的 div 包装内容 1 并将其居中。
