基本樣式範例練習網址: https://codepen.io/peiqun/pen/YoeMPY
完整範例網址: https://codepen.io/peiqun/pen/NeGJoa

HTML 結構

<div class="all">
  <div class="banner">
    <img src="path/to/img" width="150" alt="">
    <p>今天是個吃甜點的好日子。</p>
  </div>
  <div class="menu">
    <img src="path/to/img" width="200" alt="">
    <ul>
      <li>回首頁</li>
      <li>關於我們</li>
      <li>產品介紹</li>
      <li>聯絡我們</li>
    </ul>
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • 在 body 和 .all 上設定高度 100%
   • 在 .banner 上設定背景顏色、字體顏色及文字粗體
   • 調整 menu 及 .menu li 內距

   ---

2. 在 .all 上設定 display: flex
   

3. 透過 flex-direction 將 .all 內容調整為垂直排列
   

4. 在 .banner 上設定 flex: 1，將自身高度撐大
   

5. 在 .banner 上設定 display: flex;，並透過 align-items 和 justify-content 將內容垂直水平置中
   

6. 在 body 上設定 display: flex，並透過 align-items、justify-content 將內容調整為垂直水平置中
   

7. 在 menu 上設定 display: flex，並透過 justify-content: space-between 將內容貼齊主軸線最前端與最末端
   

8. 在 .menu ul 上設定 display: flex
   

9. 在 .menu 上設定 flex: 0 0 80px 調整大小，並透過 align-items 將交錯軸內容置中