html - 您如何引用说出报价的人显示在您的文档中？

Question

我在我的文档中添加了一个引用，就像这样(请看底部)UX 总监 Fred Beecher 没有出现在我的文档中引文的正下方。我确实有一个固定的页脚，它位于包含社交媒体图标的网页底部。当我检查时，看起来文本放在页脚中，底部有图标。是否有可能让 Fred Beecher... 就在报价下方？

<article class="quote">
  <blockquote
    cite="https://careerfoundry.com/en/blog/ux-design/15-inspirational-ux-design-quotes-that-every-designer-should-read/"
  >
    <p>
      How do I explain what I do at a party? The short version is that I say I
      humanize technology.
    </p>
    <footer>—Fred Beecher, Director of UX</footer>
  </blockquote>
</article>

Answer 1

使用 Bootstrap 这实际上是可能的。您将在下面的代码片段中获得所需的输出。

**请注意:**我已经包含了一些 Bootstrap 4 脚本来执行此任务。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<blockquote class="blockquote">
  <p>How do I explain what I do at a party? The short version is that I say I humanize technology.</p>
  <footer class="blockquote-footer">Fred Beecher, Director of UX</footer>
</blockquote>

更新:您也可以通过删除所有 Bootstrap 4 CDN 链接路径来实现同样的目的。仅使用 CSS 来增强您的报价。下面是 CSS 代码，后面是 HTML 标记。

.quote{
font-weight: 600;
font-size: 20px;
font-family: 'Segoe UI Light';
}

.footer
{

font-size: 20px;
font-family: 'Segoe UI Light';
}

<blockquote>
  <p class="quote">How do I explain what I do at a party? The short version is that I say I humanize technology.</p>
  <p class="footer">- Fred Beecher, Director of UX</p>
</blockquote>

希望这对您有所帮助。