如何使用 css 和 html 让黑色单词适合红色单词，就像我的设计中一样

Question

在此处输入代码与问题一起使用的参考照片 在此处输入代码我的CSS 在此处输入代码我的 hmtl

我想也许我会将“Pages from a”、“Love”和“Manifesto”分成3个单独的块，但我不知道如何让“Pages from a”和“Manifesto”适应“love”这个词，就像我设计的那样。如果没有必要，我真的不想使用它的图像，我宁愿学习正确的方法。

我是编码新手，我尝试环顾四周并自己解决这个问题，但说实话，我什至不知道如何寻找解决方案，或者从哪里开始解决这个问题，因为我只是对这个主题了解不够，不知道我所看到的是否有帮助。

请帮忙！

*{
    margin: 0;
    border: 1px solid black;
}

.wrapper {
    max-width: 1080px;
    margin: 0 auto;
}

h1{

    color: black;
    font-family: fino;
    text-align: center;
}

.love{
    font-family: adorn-smooth-pomander, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: red;
}

 <div class=title>
        <h1>
            Pages from a <span class="love">Love</span> 
            Manifesto 
        </h1>
    </div>  

    
        <h2>
            Devised by Dom Torrez | Department of Theatre Art
        </h2>

Answer 1

由于元素 .love 是 h1 的子元素，因此您可以在 h1.love 和相对位置代码>.然后设置 top 和 left 位置以相对于其父元素定位。

将 h2 元素添加到标题中，以便可以在标题上使用 flex，并将 flex-direction 设置为 column。在 h1 元素上重复弯曲和列弯曲方向，以便子元素堆叠。将第一个部分包裹在一个跨度中并给它一个类，这样它就可以向左移动 1rem。使用草书和爱情类来设计爱情元素。然后将love的第一个字母包裹在span标签中，并给它一个类，以便可以使用font-size放大它。

h2 元素样式并添加 flex 和 justify-content: center，然后进一步调整边距。添加填充以容纳 love 字符。

* {
  margin: 0;
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  color: black;
  font-family: fino;
  display: flex;
  /* flex allows ease of centering elements */
  flex-direction: column;
  /* set flex direction as column */
  align-items: end;
  /* center items */
  position: relative;
  /* set position to relative */
  padding-left: 3.8rem;
  /* this makes space for the love characters */
  letter-spacing: -1px;
}

h2 {
  /* add flex to h2 element for centering */
  display: flex;
  justify-content: center;
  letter-spacing: -1px;
  font-size: .9rem;
  margin-left: 2rem;
  margin-top: -.5rem;
}

.big {
  font-size: 5rem;
}

.first {
  margin-right: 1rem;
}

.love {
  /* style font to similar of the logo */
  font-family: adorn-smooth-pomander, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: red;
  position: absolute;
  /* position absolute to remove element from page flow */
  top: -.7rem;
  /* top set to the top position of next element set to position relative */
  left: 0;
  /* left set to the left position of next element set to position relative */
  font-size: 4rem;
}

.cursive {
  /* helper class to style love */
  font-family: 'Dancing Script', cursive;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<div class=title>
  <h1>
    <span class="first">PAGES FROM A </span>
    <span class="love cursive">
      <span class="big">L</span>ove
    </span> 
    MANIFESTO
  </h1>
  <h2>
    Devised by Dom Torrez | Department of Theatre Art
  </h2>
</div>

Answer 2

continue