---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/15(四) 每日任務(香水電商)

## 題目
這次任務中的其中一頁需要包雙層的 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. 小羊
Codepen：https://codepen.io/eqsmebaz-the-selector/pen/qBmrOrb
-->

<!-- 2. 玉凌
Codepen：https://codepen.io/ruby376758123/pen/JjNWYBR
-->

<!-- 3. Steve
Codepen: https://codepen.io/steve5631/pen/yLbMYzr
-->

<!-- 4. 黃彩雲
Codepen: https://codepen.io/corin19/pen/poPejOm
-->

<!-- 5. JT
Codepen: https://codepen.io/jsht-the-animator/pen/XWRMmLd?editors=1000 -->

<!-- 6.蕭絜云
Codepen: https://codepen.io/cloudy_77/pen/XWRMXWK -->

<!--7.小松
Codepen：https://codepen.io/120061203/pen/KKmWdxY?editors=1000
-->

<!-- 8.Cloudia
Codepen: https://codepen.io/hkps87/pen/ZEKebJd -->

<!--9.廖奕慈
Code:https://codepen.io/yiciLiao/pen/XWRMXXj?editors=1010
-->

<!-- 10.黃郁芳
Codepen: https://codepen.io/YuFang0323/pen/ExmWKVR -->

<!-- 11. Jack
Codepen: https://codepen.io/JackChen89/pen/dyWvMba -->

<!-- 12.羿宣
Codepen: https://codepen.io/Ann828/pen/RwVpaRb?editors=1000 -->

<!-- 13.Iris
Codepen: https://codepen.io/hungyen/pen/oNWZxrX -->

<!-- 14.小胖
COdepen:https://codepen.io/a1073315/pen/NWjpNZX

<!-- 15.人中
COdepen:https://codepen.io/renchong2424/pen/KKmWgLN -->

<!-- 16. 莊承叡
Codepen：https://codepen.io/Ray_ty39/pen/vYmxyjO
-->

<!-- 17. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/WNjpomX -->

<!-- 18. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/XWRMNRY?editors=1000
-->

<!-- 20. 劉子瑜
Codepen: https://codepen.io/superfish195/pen/mdmWmYr
-->

<!-- 21. 彥碩
Codepen: https://codepen.io/nelsonsu/pen/RwVpGLe -->

<!-- 22. 馮旻
Codepen: https://codepen.io/tboqkvhk/pen/ExmWydP?editors=1000-->

<!-- 23. 陳方云
Codepen: https://codepen.io/ssnnny/pen/MWmpOER?editors=1000 -->

<!-- 24. 辰
Codepen: https://codepen.io/dnangelapril/pen/bGWqYRM
-->

<!-- 25. 廖仕雅
Codepen: https://codepen.io/sophia0121/pen/qBmrNRb
-->

<!-- 26. 劉永琦
Codepen: https://codepen.io/wjsvypvv-the-decoder/pen/gOWmemx -->

<!-- 27. 薰
Codepen: https://codepen.io/chiaoshin/pen/GRmWxLx -->

<!-- 28. Genie
Codepen: https://codepen.io/hcliii/pen/XWRMgzr -->

<!-- 29. 德德
Codepen: https://codepen.io/Chiouder/pen/eYWWmQg -->

<!-- 30. 姚小芸
Codepen:https://codepen.io/crazzyamy/pen/LYyWmwJ -->

<!-- 31. 霈楹
Codepen:https://codepen.io/nrweahgl-the-selector/pen/NWjgwMw -->

<!-- 32. 陳瑋崗
Codepen:https://codepen.io/weigang-chen/pen/zYwPRXo?editors=1000 -->

<!-- 33. 陳書妤
Codepen:https://codepen.io/shuyu227/pen/eYWveMq -->