---
# System prepended metadata

title: 11/18 共筆
tags: [網頁讀書會]

---

###### 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: 將物件移置垂直線的最底下
      ![](	https://i.imgur.com/AiBw5pB.png)
    - flex-start:將物件移置垂直線的最上面
      ![](https://i.imgur.com/4tFfMD5.png)
    - center:將物件移置垂直線的中間
      ![](https://i.imgur.com/KV3QuAu.png)
    - baseline:將物件對齊基線
      ![](	https://i.imgur.com/7RWPN3g.png)
      ![](https://ithelp.ithome.com.tw/upload/images/20200925/2012834658FsHvzRpk.png)
    - stretch:將物件撐開至flexbox的大小 
      ![](	https://i.imgur.com/bB0zCzb.png)

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


3. 下周題目介紹

圖片灰階
hover


