---
# System prepended metadata

title: 切版練習-Mission 12
tags: [切版筆記]

---

# 切版練習-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爸區塊，有四個區塊
![](https://i.imgur.com/yQO2kaZ.png)


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

![](https://i.imgur.com/3UGyKyM.png)
這個區塊用display:flex排列並給定圖片及文字區塊各寬度50%，讓圖片跟文字各佔一半

- 漢堡區塊在html中有2個
  - 一個是當我點選漢堡時，跑出來的區塊
  ![](https://i.imgur.com/1z7WEyP.png)

  - 另一個是當我把畫面拉小時，所出現的漢堡
  ![](https://i.imgur.com/WD8LQq6.png)

- 漢堡在css中設定也分2個區塊 
  - 漢堡還沒點前的基本樣式
  - ![](https://i.imgur.com/zpwZl9P.png)
  - 漢堡點擊後的基本樣式
 
- 設定當畫面<768px時，漢堡會出現，原本nav爸區域的四個頁面區塊會不見

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

![](https://i.imgur.com/Rme4Wru.png)

![](https://i.imgur.com/wJ6xAyf.png)

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

![](https://i.imgur.com/YXyyI6B.png)
- signin 按鈕則使用偽元素`:hover` 讓碰到時可以變色，下面的文字也是使用:hover底下底線會出現。

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

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

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






