Question

我需要在页面顶部放一个细横幅，就像本页上的橙色通知一样。我需要它绝对定位，因为当你点击它时，它需要下拉（在当前页面上，而不是按下当前页面）。横幅需要拉伸整个窗口宽度，但内容需要在800px之间。我已经制作了但是我对它的CSS定位有困难。

谢谢！

Answer 1

以下是一个例子。主#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>

Answer 2

#banner {
  position: absolute;
  top: 0px;
  left: 0px; 

  margin: 0 auto;
  text-align: center;
}

#banner_contents {
  width: 800px;
}

应该像制作两个div一样简单...主要包装内容一个并将其居中。

CSS：页面顶部的精简横幅（如本页中的橙色横幅）

2 个答案: