3.最後美化

(1)右側區塊加入圖片

figure:nth-of-type(1) .imgBox{
  background: url(https://zoego.tech/ex/practice/img/travel01.jpg);
  background-size: cover;
}
figure:nth-of-type(2) .imgBox{
  background: url(https://zoego.tech/ex/practice/img/travel02.jpg);
  background-size: cover;
}

(2) 文字加入及美化

A.HTML結構

<section>
  <h2>圖說應用</h2>
  <figure>
    <div class="textBox">
      <figcaption>Lorem ipsum</figcaption>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet sint beatae itaque in eveniet ipsum cumque eaque ut recusandae, dolorem maiores placeat modi dolorum at aut aspernatur autem, quibusdam facere, atque nesciunt ratione hic quam? Quas eveniet amet a, nesciunt laboriosam, minus modi quisquam voluptatibus obcaecati qui alias inventore magnam.</p>
    </div>
    <div class="imgBox"></div>
  </figure>
  <figure>
      <div class="textBox">
        <figcaption>Lorem ipsum</figcaption>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet sint beatae itaque in eveniet ipsum cumque eaque ut recusandae, dolorem maiores placeat modi dolorum at aut aspernatur autem, quibusdam facere, atque nesciunt ratione hic quam? Quas eveniet amet a, nesciunt laboriosam, minus modi quisquam voluptatibus obcaecati qui alias inventore magnam.</p>
      </div>
      <div class="imgBox"></div>
    </figure>
  </section>

B.CSS美化

figure>div{
  box-sizing: border-box;
}
.textBox{
  padding: 2em;
}
h2{
  font-size: 2em; text-align: center;
}
figcaption{
  font-size: 1.3em; text-decoration: underline; padding-bottom: 1em;
}

 

顯示結果