圖說練習01

1.開始設定

(1)HTML結構

<section>
  <h2>圖說應用</h2>
  <figure>
    <div class="textBox"></div>
    <div class="imgBox"></div>
  </figure>
  <figure>
    <div class="textBox"></div>
    <div class="imgBox"></div>
  </figure>
</section>

(2)CSS美化

*{padding: 0;margin: 0;}
body{
  background: #212121; color: #fff;
  display: flex; justify-content: center;
}
section{
  width: 90%; padding-top: 10px;
}
figure{
  height: 400px;  margin: 30px auto;
  display: flex;
}
figure>div{
  height: 100%; 
}
.textBox{
  background: #f7e57c;
  width:50%;
}
.imgBox{
  background: #59cece;
  width:50%;
}

目前顯示結果