需要向 Header 添加文本和链接

Question

我在 Weebly 工作并尝试编辑我的主题。在顶部 header（第 1 行），我想在中间添加文本 "Request a Free Quote" 并将此文本 link 添加到网站页面。此外，我想在 phone 数字之前添加文本 "Call Today:"

这是我现有的 html:

<div id="header">
        <div class="row1">
            <div class="search">{search}</div>
            <div class="social">{social}</div>
            <div class="phone-number">{phone:text}</div>
        </div>

开发站点可以在这里看到：emilyscleaningservice2.weebly.com

如有必要，我也可以更新 CSS...但在这方面也需要一些指导。

Answer 1

尝试将您现有的 html 更改为：

<div class="row1">
    <div class="search">{search}</div>
    <div class="social">{social}</div>
    <div class="quoteText">
      <a href="https://emilyscleaningservice2.weebly.com/free-quote.html">Request a free quote</a>
    </div>
    <div class="phone-number">Call today: {phone:text}</div>
</div>

然后你需要将这个 class 添加到 CSS:

.quoteText { 
  position: absolute;
  left: 0;
  right: 0;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}

除此之外，如果您想让它适合移动设备，请在上面的 class 下方添加以下 CSS：

@media only screen and (max-width: 600px) {
  .quoteText { 
    display:none;
  }
}

我已经使用 inspect element 对此进行了测试，因此它应该可以正常工作:)

需要向 Header 添加文本和链接

Need to add text and links to Header

html

weebly