Skip to content

Latest commit

 

History

History

week3

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

作業

hw1:切版

請切出如下圖的版面:

不需要做到完全一樣,但可以盡你所能做的相似,除此之外,還要支援超基本的 RWD,在手機上看也不會跑版。

你可以觀察這個網頁來決定應該如何實作。

hw2:仿 Medium

請切出如下圖的版面:

可以先觀察這個網頁

文字可以自己換成其他的,只要效果有達到就好。一樣要支援簡易的 RWD,在手機上看不會跑版(拍手會自動隱藏)。

hw3:Github pages

做完上面的 Project 之後,請將你的 Github repo 開啟 Github Pages 的功能,能夠直接利用連結觀看到網頁。不知道怎麼設定的話可以參考網路上的資源。

對於 hw2,你可以加上我們在課程中提過的 og tag,並且利用 Facebook debugger 驗證是否成功。

hw4:CSS Diner

請完成這個小遊戲:https://flukeout.github.io/

hw5:Flexbox Froggy

請完成這個小遊戲:http://flexboxfroggy.com/

hw6:簡答題

請將答案寫在hw6.md

  1. 請找出三個課程裡面沒提到的 HTML 標籤並一一說明作用。
  2. 請問什麼是盒模型(box modal)
  3. 請問 display: inline, block 跟 inline-block 的差別是什麼?
  4. 請問 position: static, relative, absolute 跟 fixed 的差別是什麼?