合體版面

今天要將DAY6~DAY13所練習的所有版面合體起來，變成一個完整的頁面
結束完這個完整個範例後，接下來的這幾天，每天會提供一個比較常見的範例一起練習

想直接看合體版面效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/LYdKjPM

每個區塊的詳細重點可以參考前幾天的練習:
[DAY6]網頁切版入門及版面實作_ 圖文版面1
[DAY7]網頁切版入門及版面實作_按鈕效果
[DAY8]網頁切版入門及版面實作_ 圖文版面2
[DAY9]網頁切版入門及版面實作_區塊卡片1
[DAY10]網頁切版入門及版面實作_區塊卡片2
[DAY11]網頁切版入門及版面實作_浮動視窗
[DAY12]網頁切版入門及版面實作_ 頁尾
[DAY13]網頁切版入門及版面實作_ 導覽列

提供格線圖如下方所示:

在這邊也補充一下假字、假圖產生器整理

在練習或是實際切板的時候如果手邊剛好沒有圖片，這時候可以使用假圖產生器，方便讓你使用先拿來設計版面，是非常實用的工具。

1.Fake images please?

圖片底色是純色，撰寫的方式有以下幾種，可以選擇自己習慣的方式，可以直接在圖片網址的地方修改尺寸及顏色或文字等等

https://fakeimg.pl/

<img src="https://fakeimg.pl/300/">
<img src="https://fakeimg.pl/250x100/">
<img src="https://fakeimg.pl/250x100/ff0000/">
<img src="https://fakeimg.pl/350x200/ff0000/000">
<img src="https://fakeimg.pl/350x200/ff0000,128/000,255">
<img src="https://fakeimg.pl/350x200/?text=Hello">
<img src="https://fakeimg.pl/200x100/?retina=1&text=こんにちは&font=noto">
<img src="https://fakeimg.pl/350x200/?text=World&font=lobster">

2.Lorem Picsum

圖片有圖案可以選擇可以隨機也可以指定，撰寫的方式有以下幾種，可以選擇自己習慣的方式，可以直接在圖片網址的地方修改圖片尺寸、圖案以及縮圖位置等等

https://picsum.photos/

*同尺寸，不同圖片
<img src="https://picsum.photos/500/400?random=1">
<img src="https://picsum.photos/500/400?random=2">

*不同尺寸，同圖片
<img src="https://picsum.photos/200">
<img src="https://picsum.photos/200/300">

*黑白、模糊(可以修改後方數字來調整模糊量，介於1~10之間)
<img src="https://picsum.photos/g/200/300">
<img src="https://picsum.photos/200/300/?blur=2">
<img src="https://picsum.photos/id/870/200/300?grayscale&blur=2">


*更改圖片格式
<img src="https://picsum.photos/200/300.jpg">
<img src="https://picsum.photos/200/300.webp">