NT$1,360
最新討論




課程資訊
適合對象
你可以學到
課程介紹
學習前基本能力
學習前準備
課程資訊
關於講師

張互賓
自 2009 年從業以來,即參與網站建置相關領域的工作,從需求、設計、開發、維護、管理,皆有所涉略,也不斷地接受客戶的委託,承接專案,期許能為想打造網站的公司或個人,解決網站大小事。
現況|
▹ 緯育 TibaMe 就業養成班講師
▹ 接案 自由工作者 Freelancer
▹ 建立 「WebMix - 設計好網站」粉絲頁,分享網站知識及文章。
▹ 成立 卡斯有限公司,承接主機代管、前端開發、網站架設等服務。
經歷|
▹ 2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
▹ 2013 年:全職的網站前端自由工作者。
▹ 2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
▹ 2017 年:承接標案。
▹ 2018 年:網站相關教學。
▹ 2019 年:合夥存股管家。
作品分享(部份)|
01、5breakfast 早餐平台網站
02、X Fail 活動網站
03、鉅亨網債劵基金排行網頁
04、matchnow 網紅平台網站
05、上海在野設計網站
06、毅創投資網站
07、MBA 顧問網站
08、智夢網站
09、RocketAdmit網站
10、臺南市政府圖片資料庫平台網站
11、王爺水餃子網站
12、雕塑學會網站
13、亞太公私合夥建設發展協會網站
14、長風文教基金會網站
15、矽谷創業家協會網站
聯絡方式|
▹ 張互賓/Carlos
▹ 個人 FB( https://www.facebook.com/hubin )
▹ FB 專頁( https://www.facebook.com/webmix.cc/ )
▹ 個人 email: [email protected]
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
前言
認識 grid 和 inline-grid
QUIZ:認識 grid 和 inline-grid
認識基本術語
QUIZ:認識基本術語
grid-template-columns 設定各欄寬度、grid-template-rows 設定各列高度
QUIZ:grid-template-columns 設定各欄寬度、grid-template-rows 設定各列高度
grid-auto-flow 設定流向
QUIZ:grid-auto-flow 設定流向
grid-auto-rows 設定各列預設高度、grid-auto-columns 設定各欄預設寬度
QUIZ:grid-auto-rows 設定各列預設高度、grid-auto-columns 設定各欄預設寬度
grid-template-areas 屬性 與 grid-area 命名
QUIZ:grid-template-areas 屬性 與 grid-area 命名
grid-template 簡寫形式
QUIZ:grid-template 簡寫形式
grid 簡寫形式
QUIZ:grid 簡寫形式
repeat() 與 minmax() 函式與 fr 單位
QUIZ:repeat() 與 minmax() 函式與 fr 單位
column-gap 設定各欄間距
QUIZ:column-gap 設定各欄間距
row-gap 設定各列間距
QUIZ:row-gap 設定各列間距
gap 簡寫形式
QUIZ:gap 簡寫形式
justify-items 沿著 Row Axis 排列
QUIZ:justify-items 沿著 Row Axis 排列
align-items 沿著 Column Axis 排列
QUIZ:align-items 沿著 Column Axis 排列
place-items 簡寫形式
QUIZ:place-items 簡寫形式
justify-content 沿著 Row Axis 排列
QUIZ:justify-content 沿著 Row Axis 排列
align-content 沿著 Column Axis 排列
QUIZ:align-content 沿著 Column Axis 排列
place-content 簡寫形式
QUIZ:place-content 簡寫形式
grid-column 合併與 Grid Line 的命名
QUIZ:grid-column 合併與 Grid Line 的命名
grid-row 合併與 Grid Line 的命名
QUIZ:grid-row 合併與 Grid Line 的命名
justify-self 排列規則與 justify-items 相同
QUIZ:justify-self 排列規則與 justify-items 相同
align-self 排列規則與 align-items 相同
QUIZ:align-self 排列規則與 align-items 相同
place-self 簡寫形式
QUIZ:place-self 簡寫形式
grid-area 簡寫形式與命名
QUIZ:grid-area 簡寫形式與命名
column-count 決定欄數
QUIZ:column-count 決定欄數
column-fill 內容如何填滿欄數
QUIZ:column-fill 內容如何填滿欄數
column-gap 各欄間距
QUIZ:column-gap 各欄間距
column-rule 各欄之間的直線樣式
QUIZ:column-rule 各欄之間的直線樣式
column-span 元素跨欄
QUIZ:column-span 元素跨欄
column-width 每欄寬度
QUIZ:column-width 每欄寬度
transition-property 與 transition-duration 屬性
QUIZ:transition-property 與 transition-duration 屬性
transition-timing-function 漸變函式
QUIZ:transition-timing-function 漸變函式
transition-delay 效果的延遲
QUIZ:transition-delay 效果的延遲
transition 簡寫形式
QUIZ:transition 簡寫形式
第一個 animation
QUIZ:第一個 animation
關於 keyframes
QUIZ:關於 keyframes
同個元素套用多個 animation
QUIZ:同個元素套用多個 animation
animation-iteration-count 次數
QUIZ:animation-iteration-count 次數
animation-direction 方向
QUIZ:animation-direction 方向
animation-delay 效果的延遲
QUIZ:animation-delay 效果的延遲
animation-fill-mode 填滿模式
QUIZ:animation-fill-mode 填滿模式
animation-play-state 播放狀態
QUIZ:animation-play-state 播放狀態
animation-timing-function 漸變函式
QUIZ:animation-timing-function 漸變函式
動畫效果事件
QUIZ:動畫效果事件
簡介及直接加上 class 套用
QUIZ:簡介及直接加上 class 套用
效果永久的反覆執行
QUIZ:效果永久的反覆執行
自定義相關屬性
QUIZ:自定義相關屬性
透過 JS,動態的加上動畫效果 class
QUIZ:透過 JS,動態的加上動畫效果 class
讓動畫效果,透過按鈕可以執行多次
QUIZ:讓動畫效果,透過按鈕可以執行多次
動畫效果執行完畢後,再執行自己定義的 JS 程式
QUIZ:動畫效果執行完畢後,再執行自己定義的 JS 程式
基本套用
QUIZ:基本套用
瞭解 aos 基本屬性
QUIZ:瞭解 aos 基本屬性
瞭解 data-aos-offset
QUIZ: 瞭解 data-aos-offset
瞭解 data-aos-anchor-placement
QUIZ:瞭解 data-aos-anchor-placement
瞭解 data-aos-anchor
QUIZ:瞭解 data-aos-anchor
利用 AOS,套用自己寫的 transition
QUIZ:利用 AOS,套用自己寫的 transition
寫一個 keyframes 的簡單動畫效果,讓 AOS 套用
QUIZ:寫一個 keyframes 的簡單動畫效果,讓 AOS 套用
頁籤介面
QUIZ:頁籤介面
單個商品排版
QUIZ:單個商品排版
商品橫向檢視模式
QUIZ:商品橫向檢視模式
商品直向檢視模式
QUIZ:商品直向檢視模式
商品瀑布流檢視模式
QUIZ:商品瀑布流檢視模式
搜尋框:focus 狀態的轉場效果
QUIZ:搜尋框:focus 狀態的轉場效果
滑鼠移入,內容往上呈現
QUIZ:滑鼠移入,內容往上呈現
欄位左右擺動效果
QUIZ:欄位左右擺動效果
sprite 動畫效果
QUIZ:sprite 動畫效果
loading icon
QUIZ:loading icon
介面從螢幕右側向左滑入
QUIZ:介面從螢幕右側向左滑入
導覽列次選單淡入淡出
QUIZ:導覽列次選單淡入淡出
棋盤式版型
QUIZ:棋盤式版型
學習附件
購買此課程後,才能使用留言功能
目前尚無任何討論主題
成為第一個發問的人!在問答中找到學習的捷徑。關於講師

張互賓
自 2009 年從業以來,即參與網站建置相關領域的工作,從需求、設計、開發、維護、管理,皆有所涉略,也不斷地接受客戶的委託,承接專案,期許能為想打造網站的公司或個人,解決網站大小事。
現況|
▹ 緯育 TibaMe 就業養成班講師
▹ 接案 自由工作者 Freelancer
▹ 建立 「WebMix - 設計好網站」粉絲頁,分享網站知識及文章。
▹ 成立 卡斯有限公司,承接主機代管、前端開發、網站架設等服務。
經歷|
▹ 2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
▹ 2013 年:全職的網站前端自由工作者。
▹ 2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
▹ 2017 年:承接標案。
▹ 2018 年:網站相關教學。
▹ 2019 年:合夥存股管家。
作品分享(部份)|
01、5breakfast 早餐平台網站
02、X Fail 活動網站
03、鉅亨網債劵基金排行網頁
04、matchnow 網紅平台網站
05、上海在野設計網站
06、毅創投資網站
07、MBA 顧問網站
08、智夢網站
09、RocketAdmit網站
10、臺南市政府圖片資料庫平台網站
11、王爺水餃子網站
12、雕塑學會網站
13、亞太公私合夥建設發展協會網站
14、長風文教基金會網站
15、矽谷創業家協會網站
聯絡方式|
▹ 張互賓/Carlos
▹ 個人 FB( https://www.facebook.com/hubin )
▹ FB 專頁( https://www.facebook.com/webmix.cc/ )
▹ 個人 email: [email protected]
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。