---
# System prepended metadata

title: 切版菜鳥來記錄「刻意練習」網頁切版」!!
tags: [切版]

---

# 切版菜鳥來記錄「刻意練習」網頁切版」!!

###### tags: `切版`

### 艾莉開場白: 工作開始需要上手「網頁切版」，為什簡單的畫面我要卡這麼久?

### 目前小菜鳥艾莉狀態

- 遇到畫面+切到崩潰+灰心狀態
- 決定尋找資源來解決我的問題

這裡記錄 follow 切版練習室的步驟來練習切版。

(一) 切版原子訓練觀念+練習步驟

將網頁畫面拆解由小到大組成的切版畫面。
**從原子 -> 分子 -> 組織 -> 頁面 -> RWD -> 用JS/JQ撰寫功能 -> 動畫互動**

- 原子 : 從HTML標籤的元素組成
- 了解HTML標籤的用法和常見CSS屬性

```
<p> HI 我是艾莉 </p>
```
- 分子=原子+原子 : 由兩個以上的Html標籤組合而成，可以單獨表示一個功能或意義
- 學習了解區塊元素與行內元素/display屬性/box-sizing

```html
input輸入框+button按鈕組成搜尋框

<form action="#">
  <p class="mail-txt">訂閱我們的電子報</p>
  <input class="mail-input" type="email" placeholder="請輸入您的信箱" id="email">
  <button class="footer-btn">訂閱</button>
</form>
```
- 組織=原子+分子 : 組織是由多個Html標籤所組成的元件，在網頁中可以視為一個單獨區塊。
- 學習了解position定位/border/background屬性
- 學習了解css選擇器+權重計算

```html
由一個文字跟圖片結合的卡片Card

<div class="flower-card">
  <img src="https://picsum.photos/id/600/400" alt="">
  <div class="flower-txt">
    <h2>台灣賞櫻景點</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore, ea.</p>
  </div>
</div>
```
- 頁面=組織+組織 : 將各個組織（區塊）合成一個完整的頁面
- 學習了解flexbox排版的技巧/z-index層級
- 水平垂直置中
![](https://i.imgur.com/k9uXgnd.png)
- 調整響應式RWD尺寸
- 學習格線系統/Media Queries/ <meta>設定
- 互動性動態功能(Dynamic)與特效(Animation) : JS/JQ/CSS動畫
- 如輪播圖/卡片收合/animation/transition/@keygrames

(二) 我的目標
- 學習css選擇器+權重計算
- flex排版+格線系統
- jq互動動畫

>用Alex大大+Jani的話大大來結尾

Alex大大: 如果你看到畫面覺得很怕很難，那是出在你還不夠努力去練習，連你都覺得切版很難，那誰會覺得簡單呢?

Jani大大: 用「對的方式」刻意練習

|方式 | 說明| 
| -------- | -------- | -------- |
| 設定目標     | 系統性穩定的制定目標去學習   | 
| 專注   | 放下焦慮的心，一次只專心做好一件事    | 
| 參考意見回饋 | 參考思考別人的寫法,學習更好的作法|

(三) 範例
codepen: 
<iframe height="300" style="width: 100%;" scrolling="no" title="練習切版" src="https://codepen.io/hui190822/embed/ExNMNaR?height=96&theme-id=light&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/hui190822/pen/ExNMNaR'>練習切版</a> by hui190822

### 參考來源

-  [切版練習室](https://htmlcssroom.medium.com/%E5%88%87%E7%89%88%E7%B7%B4%E7%BF%92%E5%AE%A4-%E5%88%9D%E5%AD%B8%E8%80%85%E5%A6%82%E4%BD%95%E9%96%8B%E5%A7%8B%E4%B8%A6%E6%9C%89%E6%95%88%E5%9C%B0%E7%B7%B4%E7%BF%92%E5%88%87%E7%89%88-html-css-%E6%8A%80%E5%B7%A7-74cb322910f5) 

