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

HTML 結構

<div class="all">
  <div class="header">
    <img src="path/to/img" alt="">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="container">
    <div class="content">
      <h3>水文但知高</h3>
      <p>...</p>
      <img src="path/to/img" width="100%" alt="">
      <h3>沒機每一有己仍統英在</h3>
      <p>...</p>
    </div>
  </div>
  <div class="footer">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • 設置 .all 高度 100%，並設置 .content 寬度 600px
   • 設定 .header 背景顏色、字體、高度、內距及陰影
   • 透過 list-style: none; 取消 .menu 預設列表樣式
   • .footer 背景及字體顏色、高度設定

   ---

2. 在 .all 上設定 display: flex 效果
   

3. 在 .all 上設定 flex-direction 將內容設為垂直排列，並透過 justify-content: space-between 將內容對齊主軸線最前端與最末端
   

4. 在 .container 上設定 overflow-y: auto，將超出範圍的內容以滾輪呈現
   

5. 在 .header 加上 display: flex 的效果，並設定 align-items: center 將交錯軸內容置中對齊
   

6. 透過 justify-content: space-between 將內容對齊主軸線最前端與最末端
   

7. 在 .menu 加上 display: flex 的效果
   

8. 在 .container 加上 display: flex 的效果，並設定 justify-content: center 將主軸內容置中對齊
   

9. .footer 上設定 display: flex 效果，並透過 align-items, justify-content 將主軸與交錯軸內容置中