Question

首先，这是一个指向jsfiddle的链接，其中包含我遇到的问题示例。我想要的是屏幕顶部的横幅，以完美填充标题。让CSS和我一起工作，我没有太多运气。

这是我的代码：

<body>
  <header>
    <img src="http://rockstartemplate.com/blogheaders/bannerdesign2.jpg" alt="Banner">

    <h1>Sample Text<br></h1>
  </header>

  <main>
  Oh boy some sample text
  </main>

  <footer>
    More Sample Text
  </footer>
</body>

和

html, body  {
    border: 0px;
    margin: 0px auto;
}

body {
  font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;

  width: 950px;
  border: 2px solid black;
  box-shadow: 0 9px 18px 9px black;

  background-color: white;
}

header {
  border-bottom: 3px solid #800000;
  padding-top: 1.5em;
  padding-bottom: 0em;
  padding-left: 2em;

  background-color: grey;
}

main {
  clear: left;
  padding-top: 1.5em;
  padding-left: 2em;
  padding-right: 2em;
}

footer { 
  border-top: 2px solid black;
  padding: 15px;
}

非常感谢任何帮助。

Answer 1

从此css中删除padding-left：

<tr id="rowID" href="#">
                          <td id="userID"><?php echo $datum['ID']; ?></td>
                          <td><?php echo $datum['Account']; ?></td>
                          <td><?php echo $datum['Date']; ?></td>
                          <td><span class="label label-warning">Pending</span></td>
                          <td><?php echo $datum['Email']; ?></td>
                        </tr>

Answer 2

试试此代码

HTML

<body>
  <header>
    <img src="http://rockstartemplate.com/blogheaders/bannerdesign2.jpg" alt="Banner">

    <h1>Sample Text<br></h1>
  </header>

  <main>
  Oh boy some sample text
  </main>

  <footer>
    More Sample Text
  </footer>
</body>

CSS

html, body  {
    border: 0px;
    margin: 0px auto;
}

body {
  font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;

  width: 950px;
  border: 2px solid black;
  box-shadow: 0 9px 18px 9px black;

  background-color: white;
}

header {
  border-bottom: 3px solid #800000;
  padding-top: 1.5em;
  padding-bottom: 0em;
  padding-left: 2em;
  background-color: grey;
  min-height: 200px;
  position: relative;
  z-index: 1;
}

header img{
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  z-index: -1;

}

main {
  clear: left;
  padding-top: 1.5em;
  padding-left: 2em;
  padding-right: 2em;
}

footer { 
  border-top: 2px solid black;
  padding: 15px;
}

Answer 3

body {width: 1000px;}

或

img {max-width:900px;}

调整css以使img看起来居中。

图像不接触身体的一侧

3 个答案: