---
tags: 網頁切版直播班
---
# 8/13(五) 每日任務(香水電商)

## 題目
這次任務中的其中一頁需要包雙層的 row，所以請大家練習計算格線，如圖：
PC:
Mobile:

第一層：
* 會員中心
* 個人資料修改＋修改密碼
* 會員編碼

第二層：
* 個人資料修改內的 label+input
* 修改密碼的 label+input
* 會員編碼的內容

請將「...」 替換成格線程式碼，如： container, row, col-**

HTML

<div class="...">
  <div class="...">
    <div class="...">
      <h2>會員中心</h2>
      <ul class="list-unstyled">
        <li><a href="#" class="text-decoration-none">會員資料修改</a></li>
        <li><a href="#" class="text-decoration-none">訂單查詢</a></li>
        <li><a href="#" class="text-decoration-none">退/換貨申請</a></li>
      </ul>
    </div>
    <div class="...">
      <h2>個人資料修改</h2>
      <form>
        <div class="row mb-3">
          <label for="staticEmail" class="... col-form-label">會員帳號</label>
          <div class="...">
            <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[e-mail]">
          </div>
        </div>
      </form>
      <form>
        <h2>修改密碼</h2>
      </form>
    </div>
    <div class="...">
      <h2>會員編碼</h2>
      <ul class="list-unstyled">
        <li>
          <div class="...">
            <div class="...">
              購物車
            </div>
            <div class="...">
              56
            </div>
          </div>
        </li>
        <li> 
          <div class="...">
            <div class="...">
              我的蒐藏
            </div>
            <div class="...">
              23
            </div>
          </div>
        </li>
        <li>
          <div class="...">
            <div class="...">
              完成訂單
            </div>
            <div class="...">
              8
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

需透過 Codepen 繳交 （載入 Bootstrap CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css ）


## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答： [Codepen 範例](https://codepen.io/Bingbingboom/pen/MWprQZG) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/MWprQZG
-->

<!-- 1.

-->