CSS3 Flexible Box  Training Course Training 課程
Facebook: CSS3 Flexible Box  Training Course Training 課程  
CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程
CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程
CSS3 Flexible Box  Training Course Training 課程 CSS3 Flexible Box  Training Course Training 課程

這個頁面上的內容需要較新版本的 Adobe Flash Player。

取得 Adobe Flash Player


想定期知道最新課程及優惠嗎?
免費訂閱本中心的課程通訊!

課堂錄影隨時睇 10 大優點之時間自由:無論您是夜班或輪班工作,在日間或晚間亦可隨時來上課!而視像會在您到達時才開始播放,亦可按您需要而隨時暫停,不會因遲到或人有三急而錯過課程任何重點!

CSS3 Flexible Box (Flexbox) 響應式佈局 (Responsive Layout) 課程
課程簡稱:CSS3 Flexible Box Training Course

  • 課程時間
  • 課程簡介
  • 課程內容
  • 詳細內容

課程優惠!現凡同時報讀以下兩個課程:
即減 $130!

推介服務:課堂錄影隨時睇
編號 地點 可預約星期及時間 學費低至 85 折  
1T1909MV 旺角 一至五:11:30 - 22:30   六及日:10:30 - 21:30   (公眾假期休息) 95 折後只需 $741 按此報名:CSS3 Flexible Box  Training Course Training 課程
1T1909OV 觀塘 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 9 折後只需 $702 按此報名:CSS3 Flexible Box  Training Course Training 課程
1T1909PV 北角 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 9 折後只需 $702 按此報名:CSS3 Flexible Box  Training Course Training 課程
1T1909SV 沙田 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 85 折後只需 $663 按此報名:CSS3 Flexible Box  Training Course Training 課程
1T1909YV 屯門 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 85 折後只需 $663 按此報名:CSS3 Flexible Box  Training Course Training 課程
* 各政府部門可使用 P Card 付款  
免費試睇: 首半小時,請致電與本中心職員預約。 查看各地點電話
旺角 2332-6544
觀塘 3563-8425
北角 3580-1893
沙田 2151-9360
屯門 3523-1560
免費重睇: 學員可於享用時期內於報讀地點不限次數地重看課堂錄影,從而可反覆重溫整個課程!
導師解答: 學員可於觀看某一課堂錄影後提出課堂直接相關的問題,課程導師會樂意為學員以單對單的形式解答!
課時: 6 小時
享用時期: 報讀日至 2 星期內,進度由您控制,可快可慢。
課堂錄影導師: Franco (任教課程清單)
課堂錄影隨時睇: 詳情及示範片段


地區 地址 電話 教育局註冊編號
旺角 九龍旺角亞皆老街 109 號,皆旺商業大廈 18 樓 2332-6544 533459
觀塘 九龍觀塘成業街 7 號寧晉中心 12 樓 G2 室 3563-8425 588571
北角 香港北角馬寶道 41-47 號華寶商業大廈 3 樓 01-02 號舖 3580-1893 591262
沙田 新界沙田石門安群街 3 號京瑞廣場 1 期 10 樓 M 室 2151-9360 604488
屯門 新界屯門屯喜路 2 號屯門柏麗廣場 17 樓 1708 室 3523-1560 592552
注意! 客戶必須查問報讀學校的教育局註冊編號,以確認該校為註冊學校,以免蒙受不必要的損失!


CSS3 Flexible Box,簡稱 Flexbox,是 W3C (World Wide Web Consortium) Candidate Recommendation。Flexbox 是被視為響應式佈局的新一代概念。Flexbox 能令我們以更簡單的方式實踐響應式佈局的效果。配合 Flexbox,我們能夠實踐:

  • Grid System (responsive)





  • Input Add-ons / Input group (responsive)



  • 水平及垂直地置中 (responsive) [無需使用 absolute positioning, CSS3 transform, padding, line height, CSS table 等方法實踐]



  • Responsive Menu



《CSS3 Flexible Box (Flexbox) 響應式佈局 (Responsive Layout) 課程》是一個 6 小時的課程。在課程的初段導師會扼要地為大家溫習及學習 Flexbox 的必要背景 CSS 概念,然後會逐一教授各種 Flexbox 技術。學習過各種 Flexbox 技術後,最後導師會教授同學使用 Flexbox 實踐多種常用的網頁元件,如 responsive grid、responsive holy grail、card layout、responsive menu、responsive image (相簿)、responsive iframe 等技術,令同學可以從多角度了解如何將 Flexbox 技術實踐出來。本課程旨在令大家有效地學習 Flexbox,令大家在處理網頁佈局時多了一把利刀!


課程名稱: CSS3 Flexible Box (Flexbox) 響應式佈局 (Responsive Layout) 課程
- 簡稱:CSS3 Flexible Box Training Course
課程時數: 合共 6 小時。
適合人士: 對 CSS 有基本認識
授課語言: 以廣東話為主,輔以英語。
課程筆記: 本中心導師親自編寫中文為主筆記,而部份中文字附有英文對照。
免費重讀: 傳統課堂學員可於課程結束後三個月內免費重看課堂錄影。



課程名稱:CSS3 Flexible Box (Flexbox) 響應式佈局 (Responsive Layout) 課程
- 簡稱:CSS3 Flexible Box Training Course

第一部份:必要的背景 CSS 概念
在課程的初段導師會扼要地為大家溫習及學習 Flexbox 的必要背景 CSS 概念。

  • Selectors
  • Margin
  • Border
  • Padding
  • Content
  • Viewport (vw, vh 等概念)

第二部份:各種 Flexbox 技術
在這部份導師會透過一系列的實習教授各種 Flexbox 技術。

  • 基本術語
    • main axis
    • main start
    • main end
    • cross axis
    • cross start
    • cross end
    • flex container
    • flex item
  • flex container
    • display
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-content
    • align-items
  • flex item
    • flex
    • flex-grow
    • flex-shrink
    • flex-basis
    • align-self
    • order

第三部份:實際使用 Flexbox 的例子
在這部份導師會教授同學使用 Flexbox 實踐多種常用的網頁元件,如 responsive grid、responsive holy grail、card layout、responsive menu、responsive image (相簿)、responsive iframe 等。

  • Card layout (能通過 Google 行動裝置相容性測試)



  • Responsive images / 相簿 (能通過 Google 行動裝置相容性測試)



  • Responsive Grid



  • Holy Grail (responsive)



  • Input Add-ons / Input group (responsive)



  • 水平及垂直地置中 (responsive)



  • Responsive Menu



  • Responsive iframe (例如 YouTube 影片)



  • Responsive video (HTML5 video element)



  • Bonus: Responsive text (Flexbox 並非實踐 responsive text 的關鍵,但為使同學有更豐富的 responsive 體驗,導師亦會教授這部份)




1 CSS3 Flexbox 介紹
1.1 Grid System (Responsive)
1.2 Holy Grail (Responsive)
1.3 Input Add-ons / Input groups (Responsive)
1.4 Responsive Menus
1.5 Responsive Images
1.6 Responsive Videos
1.7 Card layouts
1.8 水平及垂直地置中 (Responsive)

2 開發環境 (Integrated Development Environment)
2.1 下載開發環境 (Integrated Development Environment) 軟件
2.2 安裝開發環境 (Integrated Development Environment) 軟件
2.3 新增項目 (Projects)
2.4 新增及準備 HTML
2.5 新增及準備 CSS
2.6 執行並檢視結果

3 必要的 CSS 概念
3.1 Selectors
3.1.1 Class selectors
3.1.1.1 實習:Class selectors
3.1.2 ID selectors
3.1.2.1 實習:ID selectors
3.1.3 其他 selectors 參考
3.1.3.1 Attribute selectors 及相關的示範
3.1.3.2 Sibling selectors 及相關的示範
3.1.3.3 Descendant selectors / Child selectors 及相關的示範
3.1.3.4 Pseudo-classes 及相關的示範
3.1.3.5 Pseudo-elements 及相關的示範
3.2 CSS 單位 (Units)
3.2.1 絕對單位 (Absolute units)
3.2.2 相對單位 (Relative units)
3.2.2.1 em
3.2.2.2 vw 與 vh 及相關的示範
3.2.2.3 百分比 (%) 及相關的示範
3.3 CSS Box model
3.3.1 margin, border, padding, width, height 與 content
3.4 Media queries 及相關的示範
3.4.1 綜合例子
3.4.1.1 綜合例子:max-width
3.4.1.2 綜合例子:min-width and max-width
3.4.1.3 綜合例子:min-width

4 各種 Flexbox 技術
4.1 基本術語
4.1.1 axis (main, cross), main (start, end), cross (start, end), flex container, flex item
4.1.1.1 水平
4.1.1.2 垂直
4.1.1.3 軸
4.1.1.4 大小
4.2 Flex containers
4.2.1 新增 flex containers
4.2.1.1 實習:新增 flex containers
4.2.2 Flex containers 內的物件排列方向 (橫向 [row] 與縱向 [column])
4.2.2.1 實習:Flex containers 內的物件排列方向 (橫向 [row] 與縱向 [column])
4.2.3 一行 VS 多行
4.2.3.1 實習:一行
4.2.3.2 實習:多行
4.2.4 結合方向、一行及多行設定的 flex-flow
4.2.4.1 實習:結合方向、一行及多行設定的 flex-flow
4.2.5 處理 x-axis 多出來的空間
4.2.5.1 flex-start
4.2.5.2 flex-end
4.2.5.3 center
4.2.5.4 space-around
4.2.5.5 space-between
4.2.5.6 實習:處理 x-axis 多出來的空間
4.2.6 處理 y-axis 多出來的空間
4.2.6.1 baseline
4.2.6.2 stretch
4.2.6.3 center
4.2.6.4 實習:處理 y-axis 多出來的空間
4.2.7 處理因為 wrap 而多出來的空間
4.2.7.1 實習:處理因為 wrap 而多出來的空間
4.3 Flex items
4.3.1 次序
4.3.1.1 實習:次序
4.3.2 發展 (growth)
4.3.2.1 實習:發展 (growth)
4.3.3 收縮 (shrink)
4.3.3.1 實習:收縮 (shrink)
4.3.4 預設的長度
4.3.4.1 實習:預設的長度

5 實際使用 Flexbox 的例子
5.1 Responsive Grid System
5.1.1 Responsive Grid System (第一部份:大小相同)
5.1.2 Responsive Grid System (第二部份:大小不一)
5.2 Holy Grail Layout
5.2.1 甚麼是 Holy Grail Layout?
5.2.2 原理
5.2.3 實習:Holy Grail Layout
5.2.4 實習:Holy Grail Layout (with sticky footer)
5.2.4.1 原理
5.2.4.2 實踐
5.3 水平與垂直置中
5.3.1 實習:水平與垂直置中
5.4 Responsive card layout
5.4.1 實習:Responsive card layout
5.5 Responsive 圖片 / 相簿
5.5.1 實習:Responsive 圖片 / 相簿
5.6 Responsive YouTube
5.6.1 實習:Responsive YouTube
5.7 Responsive Videos
5.7.1 實習:Responsive Videos
5.8 Responsive Input Add-ons / Input Groups
5.8.1 Iconic Font
5.8.2 實習:Responsive Input Add-ons / Input Groups
5.9 Responsive Menus
5.9.1 Responsive Menus (第一部份)
5.9.1.1 實習:Responsive Menus (第一部份)
5.9.2 Responsive Menus (第二部份)
5.9.2.1 實習:Responsive Menus (第二部份)
5.10 Responsive Text
5.10.1 實習:Responsive Text

6 Vendor Prefix
6.1 實習:自動地加上 prefixes

 

更多綜合課程
  攝影課程
  • 攝影初級
  • 攝影中級 (景深專題)
  • 攝影中級 (風景專題)
  法律課程
  • 代理人的法律責任
  • 公司董事和合夥人的法律責任
  • 婚姻的法律責任
  • 遺產繼承的合法權益
  英文課程
  • IPA 拼音:級別 1 2 3 4
  普通話課程
  • 基礎普通話拼音 (免費)
  • 進階普通話拼音
  • 普通話會話:級別 1 2 3
  西班牙語文課程
  • 級別 1 2 3
  中醫課程
  • 濕疹與皮膚敏感病
  • 暗瘡與色斑 | 鼻敏感與感冒
  • 脫髮與白髮 | 從五官看健康
  風水命理課程
  • 紫微斗數:級別 1 2 3
  • 子平八字:級別 1 2 3
  • 八字風水:級別 1 2 3
  • 奇門遁甲:級別 1 2 3

這個頁面上的內容需要較新版本的 Adobe Flash Player。

取得 Adobe Flash Player