我需要在页面顶部放一个薄的横幅,就像本页上的橙色通知一样.我需要它绝对定位,因为当你点击它时,它需要下拉(在当前页面上,而不是按下当前页面).横幅需要拉伸整个窗口宽度,但内容需要在800px之间.我已经制作但我在CSS定位方面遇到了麻烦.
谢谢!!
Oll*_*lly 18
以下是一个例子.主要#banner元素拉伸全屏,并使用固定到视口的顶部position: absolute; top: 0; left: 0.将width: 100%使得拉伸全宽.
这#banner-content是您放置内容的地方.它居中并固定在800px宽度.我在它周围放了一个边框让你可以看到.
注意:我还'重置'所有元素的边距和填充以清除默认填充.您可能希望在最终应用程序中使用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>