# 切版練習-Mission 12

這個網頁是我看完css coke金魚系列以及自己找youtube教學後的切版練習，RWD有用到一點點，還正在學習，待之後再補上。

## Introduction 網頁介紹
這是一個旅遊blogger的網頁，上面有nav爸會固定在每一頁的正上方，網頁共分四個頁面分別為Home、Login、Destination、Contact Us
- Home裡有基本的nav、section最後則是footer。下面加了三個section，分別為:

1. 背景圖與連結按紐，
2. 橫向文字圖片三欄排列
3. 區塊一半圖示一半文字排列

- login
裡則有相同的nav爸固定在最上面，下面有一個視窗，視窗裡面有三個容器可以讓人輸入資訊，最後還有個按鈕連結。

- Destination
有相同的nav爸 固定在上面，接著有一個區塊文字說明，再接著6個文字圖片排列還有最下面的footer。

- Contact us
有相同的nav爸 固定在最上面，下面兩個區塊，一個區塊是文字說明，另外一個區塊是一個容器裡有三個區塊可以讓人輸入資訊以及按鈕，還有最下面的footer。

# layoout
## 12-1 Home
nav爸區塊，有四個區塊

1. 商標圖案，一個容器包覆一個a，點選即可回歸首頁
2. 頁面介紹，容器包覆著ul li
3. 社群符號。容器包覆a，點選即可連至社群頁面。
4. 漢堡，當畫面大小<800px時漢堡就會出現
整個navbar有用絕對定位讓他定在最上面，整個排列有用flex以及space-between讓大家分散在左中右三個區塊

這個區塊用display:flex排列並給定圖片及文字區塊各寬度50%，讓圖片跟文字各佔一半

- 漢堡區塊在html中有2個
- 一個是當我點選漢堡時，跑出來的區塊

- 另一個是當我把畫面拉小時，所出現的漢堡

- 漢堡在css中設定也分2個區塊
- 漢堡還沒點前的基本樣式
- 
- 漢堡點擊後的基本樣式

- 設定當畫面<768px時，漢堡會出現，原本nav爸區域的四個頁面區塊會不見

## 12-2 Login
有把在index寫好的navbar一起貼過來，並且連結相同的Style.css，讓nav爸可以出現在最上面。
背景使用fixed定位以及z-index讓他固定在最後面，並加上毛玻璃的效果讓他變模糊。



- 這裡是input+label並設定偽元素`:checked`設定了動畫在`::before`與`::after`後面加上`transform:scale(1)`讓v可以延遲延伸。

- signin 按鈕則使用偽元素`:hover` 讓碰到時可以變色，下面的文字也是使用:hover底下底線會出現。

## 12-3 Destination
有把在index寫好的navbar一起貼過來，並且連結相同的Style.css，讓nav爸可以出現在最上面。
文字區塊擺在上面使用`margin:auto`及`text-align:center`置中。

- 下面圖片區塊使用`display:flex`＆`flex-wrap:wrap`換行設定，並設定item 寬度，讓畫面兩個item一排。
- 圖片使用偽類`：hover`改變背景顏色
- 圖片前有加上一個button tag使用絕對定位定在圖片上，並且設定`display:none`等到碰到後才`display:flex`
## 12-4 Contact Us
有把在index寫好的navbar一起貼過來，並且連結相同的Style.css，讓nav爸可以出現在最上面。
使用偽類`:focus`讓滑鼠指標到框框時，可以聚焦。
使用`:hover` 使滑鼠經過時可以變色。

###### tags: `切版筆記`