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%; }
目前顯示結果