HiSKIO For Business

單元 1 - float主要用途：選單排列、版面排列、文繞圖

單元 2 - float的原理:left right

單元 3 - 直接圖片排排看！float簡單應用(1)

單元 4 - 直接圖片排排看！float簡單應用(2)

單元 5 - float元素與非float元素的關係

單元 6 - 馬上用！ 選單的排列

單元 7 - css的重設：CSS Reset 與 CSS normalize

單元 1 - CSS中float引起的父元素高度塌陷

單元 2 - 父元素高度塌陷解法(一)：overflow:hidden

單元 3 - 父元素高度塌陷解法(二)：空標籤clear:both

單元 4 - 父元素高度塌陷解法(三)：父元素加偽類clear:both

單元 5 - 父元素高度塌陷解法(四)：display:table

單元 6 - 父元素高度塌陷解法(五)：display:flow-root

單元 1 - position:static和position:relative

單元 2 - position:fixed和position:absolute

單元 3 - position: sticky

單元 4 - 實例應用(一): 捲動固定選單

單元 5 - 實例應用(二): 圖文配置-1

單元 6 - 實例應用(二): 圖文配置-2

單元 7 - 實例應用(三): 次選單-1

單元 8 - 實例應用(三): 次選單-2

單元 1 - Flex的概念

單元 2 - 新增html內容：認養合作夥伴

單元 3 - 容器(Container)屬性一: display, flex-direction, flex-wrap, flex-flow

單元 4 - 容器(Container)屬性二: justify-content, align-items, align-content

單元 5 - 項目(Item)屬性一: order, align-self

單元 6 - 項目(Item)屬性二: flex-grow, flex-shrink, flex-basis, flex

單元 7 - flex應用-about us

單元 8 - flex合併使用

單元 1 - gird system的介紹與瀏覽器支援性

單元 2 - (1) grid-template-columns, grid-template-rows

單元 3 - (2) grid-template-columns, grid-template-rows

單元 4 - grid-template-areas, grid-template

單元 5 - grid-column-gap, grid-row-gap, grid-gap

單元 6 - Grid Container的水平垂直: justify-items, align-items

單元 7 - Grid Item的水平垂直:justify-content, align-content, place-content

單元 8 - grid-auto-rows, grid-auto-columns

單元 9 - grid-auto-flow

單元 10 - grid

單元 11 - item grid

單元 12 - item justify-self, align-self, place-self

單元 1 - 動物新聞頁面gride-system製作

單元 2 - 樣板頁面製作

單元 3 - 合作夥伴頁面製作

單元 4 - blog頁面製作

單元 5 - about頁面製作

單元 6 - 其他頁面的調整

單元 7 - 聯絡我們頁面排版練習與完成網站檔案