---
# System prepended metadata

title: 12/05 共筆
tags: [網頁讀書會]

---

###### tags: `網頁讀書會`
# 12/05 共筆

今天參與人員幫我留下你的名字喔 >wO
## 簽到區
時間：111/12/05
地點：IB 12 R02
主持人：AN
參與人員：CCcat、Jovi_pig、AN、kevin蔡凱鈞、CaseyWang、yuwen、Alan邱懷恩、游翔霖

### 粗流
|時間|安排|
|---|---|
|19:00-19:15|描述目前完成進度(Modern Layout 或其他題目）|
|19:15-19:20|relative & absolute、before & after|
|19:20-19:50|實作|
|19:50-20:15|教 vue，把 Modern Layout 跟 vue 結合 (其實是邊講邊做)|
|20:15-20:45|實作|
|20:45-21:00|講棋盤|


### 當天要教的東西
#### css
- relative、absolute 的關係
- after, before
- flex, position 的混用

#### vue
[檔案下載](https://unpkg.com/vue@3/dist/vue.global.js)
[Vue 中文文檔](https://vuejs.bootcss.com/guide/)
- 瀏覽器在 parsing code 的過程
- 生命週期(beforeCreate, create, mounted, beforeUnmount)
- data、mounted、methods、watch...
- v-for、v-bind

#### chinese-chess board code part
```htmlembedded
<div class="cube" v-for="el in 8 * 4" v-bind:style="{'width': cubeSize + 'px', 'height': cubeSize + 'px'}"></div>
```

### 你各位的 codepen
#### Modern Layout

芷安 https://codepen.io/zhian66/pen/JjZZGax
睿麟 https://codepen.io/jovi920204/pen/abKRqmY
鈺雯 https://codepen.io/Tinichiou/pen/WNyzRvN
正宏 https://codepen.io/chenghung-wang/pen/dyKJqER
凱鈞 https://codepen.io/kkabula/pen/NWzyazZ
小邱 https://codepen.io/robpsuso-the-animator/pen/jOKxerK
宇凡 https://codepen.io/wuyufan7605/pen/yLEGOWb
翔霖 https://codepen.io/IamXDD1/pen/xxzpoZz
沿沿 https://codepen.io/Gabriel9208/pen/qBKpLeR


#### Chinese chess
鈺雯 https://codepen.io/Tinichiou/pen/rNKopLb
凱鈞 https://codepen.io/kkabula/pen/dyKLgWX
