---
tags: 2021程式體驗營
---

# 體驗營直播-第二堂flex甜點切版

* [設計稿-甜點切版設計稿XD](https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/screen/9ba8ec87-c41b-474f-b92b-d2bb2fc7f922/specs/?fbclid=IwAR15fy4gQca7ZDUNrLwshygmfRsPpVtKRXW-ogWntmWT5WHXRzZ10ZG3Heg)
(最下方的訂閱你我的甜蜜郵件與表尾不需要設計)
* [甜點demo-俊儀老師](https://juniwu0311.github.io/sweetaste/index.html?fbclid=IwAR0nCvdh5XF25pnkVzRbpw2zcCw_nLGXYWLCvXciqsWf9sgKmbhSKVTx2jM)
* 圖片 [github路徑](https://github.com/hexschool/webLayoutTraining1st/tree/master/student-week1)、[logo](https://hexschool.github.io/webLayoutTraining1st/student-week1/logo-all-dark.svg)、[banner](https://hexschool.github.io/webLayoutTraining1st/student-week1/banner.png)、[產品圖片](https://hexschool.github.io/webLayoutTraining1st/student-week1/p-1.png)、
* 文件
* [Flex切版任務hackmd文件](https://hackmd.io/@hexschool/ByoLEWRcu)
* Flex 切版教學: [CSS3 Flex完整教學 - 50分鐘影片](https://www.youtube.com/watch?v=lmBM7_OTDBQ)、
[進階教學](https://w3c.hexschool.com/flexbox/2186a786)
* VS Code 產生程式碼片段[snippet generator](https://snippet-generator.app)、[操作圖文](https://hackmd.io/17CvAlWXR16CvkHbJevLmQ)
* Font Awesome [官網連結](https://fontawesome.com/)、[範例程式碼](https://codepen.io/hexschool/pen/ZEejMyo)
[新版需註冊](https://kumo.tw/article.php?id=48) 才會看到cdn

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

* [codepen](https://codepen.io/tinchen/pen/KKqPQvP)

--不要矇頭練習
--第一次練習時列出來不熟悉的地方改善他（3-5h佔多數 5-8第二）
--第二次練習可錄youtube
--把觀念累積起來，不要急著作作業，觀念清楚，作業才會流暢

## 前置作業--列出設計稿共通資源
老師練習時習慣會寫筆記blog，找出設計稿共同點，
例如:色系、icon、字體等級、表頭選單、卡片大小 (01:30)

* 色系:
主色 #3f5d45 綠
輔色 #EAF0ED 淡綠
* 四個 icon
fas fa-shopping-cart
fas fa-heart
fas fa-angle-left
fas fa-angle-right

`<i class="fas fa-shopping-cart"></i>`
`<i class="far fa-heart heart"></i>`

* 字體等級: fz16普通、fz20副標(品項)、fz24標題(選單)
* 表頭選單（文字16行距22pt10pb8)
* 卡片大小（高56左173右127）

## VSCode 產生程式碼片段
自訂環境(10:26)、自訂reset快速鍵
[snippet generator](https://snippet-generator.app/)

(34:20-39:20補充)(33:55) [操作圖文](https://hackmd.io/17CvAlWXR16CvkHbJevLmQ)

## 切版實作
### emmet快速開發寫法
* 表頭display:flex要下在外層
表尾居中下container寬度940
* 同層用+號，若要往下一層用括號包起來(16:02)(15:13)
.header>((h1>a[href="#"]>img)+(ul>li*4>a[href="#"]))


### svg 向量圖片 png jpg 使用時機(17:42)
* logo可用svg檔，向量不失真，需要給高寬
* `<header>`標籤可以放在多處（19:30）
* **H1裡面沒有包文字的話，seo會搜不到主題嗎? (20:52)**
搜尋引擎會搜尋`<title>`標籤的文字，h1裡面若有圖片alt建議要加上文字，或是可以使用文字隱藏寫法text-hide

### 設計稿-開版寬度的用意
* **為何container不是寫1024px左右內推padding 42px?(23:18)**
設計稿的開版尺寸很容易誤以為是滿版尺寸，開版主要是要告知那些地方是居中、固定尺寸

### nav標籤的用途
若有很多ul標籤，可以把最重要的用nav包起來，nav需要加上標題內容（要用到再查）(24:36)

## 切版實作-header-flex應用
(28:00)
* logo上下padding30
* 選單與logo垂直置中(33:04) aic=align-item:center
* flex常用可把快速鍵背下來，以重音為縮寫例如:
jcsb= justify-content: space-between;
* 觀察連結顏色文字，有輸入過的色號，在vscode只要打#號就會在跳出提示

body{
color:# #3f5d45;
}
a{
color:# #3f5d45;
text-decoration:none;
}

## 切版實作-header-購物車鈕擺放的藝術
購物車設計稿右側切齊不好點擊，不容易點到，可能會降低購買率，可與設計師討論，將按鈕靠左一點較適合(38:01)

理論要學好啊 不然怎麼講爆對方

## 第二部 切版實作-aside-腦補開發實作
line-height:65px，高度可用行距推出來(2:24)
扣掉border重疊的1px(3:53)

## 切版實作-productList
### **1. productList結構**
fxww: flex-wrap:wrap
li要補上寬度(10:32)


### **2. .productList-card li**
設定position:relative

### **3. .productList-card .tag**
設定position：absolute
文字直式writing-mode: vertical-lr
字距latter-spacing:5px;
top0 left20 padding10

### **4. .tag寫法**
.tag所有名叫tag都會吃到
若只有單一區域，就應該要設定.productList.tag 或 .productList (13:28)

### **5. before、after使用時機:**
此處不建議用before，因before文字會放在css的 content:””，資料庫需要撈資料符合條件才會放到content，需要判斷的東西盡量不要寫在css (19:30)

before、after適用在和文字資料無關時，例如點綴用的`<i>` (20:36)

### **6. .heart**
設定pos:a= position:absolute
top20 right20



### 圖片下方空白3px 如何處理?
圖片下方預設有空白，[在圖片img設定display:block](
https://tzuhui.github.io/2020/01/08/HTML/html-img-blank/) (39:20)

## 練習紀錄
20210822
* header要設定df和aic才可上下置中

    .header{
      display: flex;
      justify-content: space-between;
      padding-top: 40px;
      padding-bottom: 40px;
      align-items: center;
    }

* 容易搞混選單按鈕寬度要設定在li 還是a?
**選單寬度用padding去推，設定在a標籤**

    .menu a{
        padding: 10px 30px 8px 30px;
        color: #3F5D45;
        font-weight: 600;
        display: block;	
    }
    .menu a:hover{
        background: #3F5D45;
        color: #fff;
    }

* a標籤記得寫display: block;讓點擊範圍加大，在li扣掉.aside a重疊的border

    .aside li{
        border-bottom: -1px;
        /*扣掉.aside a重疊的border*/
    }
    .aside a{
        display: block;
        /*a標籤記得寫display: block;讓點擊範圍加大*/
        line-height: 65px;
        border:1px solid #EAF0ED;
        text-align: center;	
    }

* productList 需多練習
run2找不到productList-card錯誤在哪，卡片無法並排

## 小組任務

[小組任務hackmd](https://hackmd.io/Yhqo7uRcS326IB6Hg35gGQ)
### 第一題
1. Flex 大挑戰 [Flexbox青蛙](https://flexboxfroggy.com/#zh-tw)、 [flex海報船-初級](https://hexschool.github.io/flexbox-pirate/#/)
2. 已有概念的同學，刻意練習你不曾用到的語法或範例
* [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
* [跟著海盜學Flexbox Playground](https://codepen.io/peiqun/pen/WYzzYX)

(1) flex-flow是 flex-direction 與 flex-wrap 的縮寫，所以只要在這前後帶上相對應的值即可。

    .flex-container {
      flex-flow: <'flex-direction'> || <'flex-wrap'>
    }

(2) align-items 交錯軸設定
align-content多行交錯軸的對齊設定

(3) 內元件flex
flex 是縮寫，裡面依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis，如果只設定一個則是 flex-grow。

* flex-grow: 元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放。
* flex-shrink: 元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 1，如果設置為 0 則不會縮放。
* flex-basis: 元件的基準值，可使用不同的單位值。

### 第二題 觀察影片(先略過)
請觀察影片，有哪些熱鍵、編輯器操作、程式碼語法是你原本不會的，然後被你偷學到哪些知識點。
* [Flexbox Live Demo 切版](https://www.youtube.com/watch?v=iVS7qrMEbe8)
* [Adobe XD 標示文件教學 - 高度確認講解](https://www.youtube.com/watch?v=hodJ07BC6EQ)
* [文字單行與多行處理辦法 - line-height 與 padding 的抉擇](https://www.youtube.com/watch?v=keRHKc0t250)