Question

我试图将文字标题与横幅广告分开。这是代码：

＆＃13;

<style>
  body {
    background-color: #cccccc;
  }
  #banner {
    position: top;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 275px;
    z-index: 1;
  }
</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>

＆＃13;

我尝试在标题之前添加换行符以将标题与横幅分开，但这并非在所有观看监视器中保持一致。我在＆＃34;身高＆＃34;中将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的百分比来在不同的浏览器上获得更一致的视图。或者你可以把它放到一个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>

在CSS中将横幅与文本分开

1 个答案: