时间戳

首页 > 解决方案 > 您如何引用说出要在您的文件中显示的报价的人？

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

问题描述

我在我的文档中添加了一个引用，就像这样（请参见底部） 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>

标签： htmlcssxcodetagsfooter

解决方案

使用 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>

希望这可以帮助。

推荐阅读