###### tags: `網頁讀書會`

# 11/18 共筆

[TOC]

## 今天規劃
|時間|活動|
|--|--|
|19:00-19:15|讀書會講解|
|19:15-19:30|認識彼此|
|19:30-19:45|網頁起手式/學習途徑分享|
|19:45-20:00|題目試解|

以後規劃
|時間|活動|
|--|--|
|19:00-19:30|分享上一次題目的解法|
|19:30-19:45|講解下週題目|
|19:45-20:00|分享自己酷酷的東西 or 討論|

## 你各位的codepen
#### 2022-11-16 前端課程檔案(Login)
正宏：https://codepen.io/chenghung-wang/pen/OJEOjgE
宇凡：https://codepen.io/wuyufan7605/pen/rNKYzwa
沿沿：https://codepen.io/Gabriel9208/pen/eYKeERY
睿麟：https://codepen.io/jovi920204/pen/poKdrPB
欣怡：https://codepen.io/YI-0924/pen/yLEPobW
信佑：https://codepen.io/CCcat134312/pen/mdKqwqE
凱鈞：https://codepen.io/kkabula/pen/XWYzagb
鈺雯：https://codepen.io/Tinichiou/pen/zYaRGpN

#### image grayscale transition
宇凡：https://codepen.io/wuyufan7605/pen/rNKYzwa
沿沿：https://codepen.io/Gabriel9208/pen/qBKVPEV
睿麟：https://codepen.io/jovi920204/pen/MWXOEej
芷安：https://codepen.io/zhian66/pen/poKdaYP
凱鈞：https://codepen.io/kkabula/pen/OJEQvJe

#### Modern layout
正宏：https://codepen.io/chenghung-wang/full/dyKJqER
凱鈞：https://codepen.io/kkabula/pen/NWzyazZ
沿沿：https://codepen.io/Gabriel9208/pen/qBKpLeR
小邱：https://codepen.io/robpsuso-the-animator/pen/jOKxerK

## 共筆

1. Flex 呱呱
- Property:
- justify-content : 改變物件的水平位置
- Value:
- flex-start: 將物件移至該物件所在的水平座標軸的最開始位置(若有被reverse, start&end的位置也會被reverse, 可視為reverse座標軸)(間隔大小不變)
- flex-end: 將物件移至該物件所在的水平座標軸的最末位置(間隔大小不變)
- center: 將物件移至該物件所在的水平座標軸的中間位置(間隔大小不變)
- space-between: 將物件等間隔分開(最左右不留空間)
- space-around: 將物件等間隔分開(最左右有留等大空間，但與物件間隔的大小不同)
- Property:
- align-items:改變物件的垂直位置
- Value:
- flex-end: 將物件移置垂直線的最底下
- flex-start:將物件移置垂直線的最上面
- center:將物件移置垂直線的中間
- baseline:將物件對齊基線
- stretch:將物件撐開至flexbox的大小

2. Codepen intro
codepen 基本介紹
codepen 基本操作、分享

3. 下周題目介紹

圖片灰階
hover