html - 将横幅与文本分开

Question

我正在尝试将 eBay 列表的文本标题与横幅分开。这是代码:

body {
  background-color: #cccccc;
}

#banner {
  position: top;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 275px;
  z-index: 1;
}

<div id="banner">
  <img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>

<h1 style="font-family:helvetica">[Header text]</h1>

我尝试在标题前添加换行符以将标题与横幅分开，但这在所有查看监视器中并不一致。我在“高度”中将 px 转换为 em 并添加了四个中断，但这也不起作用。非常感谢。

Answer 1

尝试实现 margin-top。

<style>
  body {
    background-color: #cccccc;
  }
  #banner {
    position: top;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 275px;
    z-index: 1;
  }
  
  h1{
    margin-top:150px;}
</style>
<div id="banner">
  <img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>

<h1 style="font-family:helvetica">[Header text]</h1>

更新:您还可以使用 margin-top 的百分比来在不同的浏览器上获得更一致的 View 。或者你可以把它放在一个 div 中。这样您就不需要指定 margin-top。

  body {
    background-color: #cccccc;
  }
  #banner {
    position: top;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 275px;
    z-index: 1;
  }
  

<div id="banner">
  <img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">


<h1 style="font-family:helvetica">[Header text]</h1>
  
  </div>