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

我需要在页面顶部放一个薄的横幅,就像本页上的橙色通知一样.我需要它绝对定位,因为当你点击它时,它需要下拉(在当前页面上,而不是按下当前页面).横幅需要拉伸整个窗口宽度,但内容需要在800px之间.我已经制作但我在CSS定位方面遇到了麻烦.

谢谢！！

解决方法

以下是一个例子.主#banner元素拉伸全屏,并使用position：absolute;固定到视口的顶部;顶部：0; left：0.宽度：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>

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

解决方法

相关文章