Question

我的h1标记应该类似于网页上显示的横幅广告，但是颜色背景溢出到我上面的导航中。我的图形对齐也有问题。这个问题看起来很容易，所以当我等待答案时，我会尝试自己解决这个问题。我可能通过组合标签的内容找到了横幅的故障排除，但我想找到一种方法来像我之前那样拥有它。我很乐意为网站的任何部分提供CSS和/或HTML。如果有任何帮助，我在Google Chrome浏览器中使用Adobe Dreamweaver CC 2018。谢谢你的帮助。

码

body {
  font-size: 1.1em;
  font-weight: normal;
  font-family: Georgia, Arial, serif;
  color: #DD847F;
  text-align: left;
  background-color: #F7E0C4;
  border-color: #B00F32;
  border-width: 10px;
  border-style: double;
  margin: 100px 200px;
  padding: 0px 0px;
}

h1 {
  font-size: 2.8em;
  font-weight: bold;
  color: #F7E0C4;
  text-align: center;
  font-family: Verdana, Arial, serif;
  border-left: 100px solid #B00F32;
  border-right: 100px solid #B00F32;
  border-bottom: 100px solid #B00F32;
  border-top: 100px solid #B00F32;
  background-color: #B00F32;
  padding-top: 0px;
}

div.info {
  text-size: 40%;
  float: right;
  overflow: hidden;
}

<h1>Web Portfolio</h1>
<div id="skipnav">
  <a href="#main">Skip to Main Content</a>
</div>

Answer 1

这是你想要做的吗？或类似的？

在整页展开代码段

中打开此代码

body {
  margin: 0;
  font-size: 1em;
  font-weight: normal;
  font-family: Georgia, Arial, serif;
  color: #DD847F;
  text-align: left;
  background-color: #F7E0C4;
  padding: 0;
  height: 100vh;
  overflow: auto;
  width: 100wh;
  position: relative;
}

.main--title {
  border: 10px double #B00F32;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 25px;
}

.skip--content {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -10%);
}

<h1 class="main--title">Web Portfolio</h1>
<div id="skipnav" class="skip--content">
  <a href="#main">Skip to Main Content</a>
</div>

标签溢出到网站上的其他元素

1 个答案: