|
Udemy線上課程 解決CSS令人煩惱的版面問題：float, position, flexbox, gridsystem(含教材) 講師:朝輝 蘇 影音教學 中文發音 繁體中文版(DVD版)
◆ 清楚解釋float的原理與應用，修改版面不再是惡夢！
◆ position靈活配置，讓你網頁版面躍昇空間感！
◆ 學會最新flexbox與grid system 網頁排版輕鬆達成！
◆ css版面配置課程全面剖析， 一次解決你拼湊無邏輯的模糊觀念！
當網頁跑版已常讓您抓狂，您還是無可奈何嗎？
網頁設計師最大的痛點之一，稍微知道float、position、flexbox和gridsystem的原理，但卻搞不懂它們的應用方法，導致一用下去悲劇發生。
後續花費更多的時間去調整版面，看著交件日期越來越近，自己就越來越心急！
從事網頁相關工作者，CSS版面必修課程！
完全剖析CSS相關版面基本屬性，先掌握並透徹基礎原理。
再搭配實際CSS版面配置應用，一步步提升自己的版面配置速度，整套課程多種實戰方法靈活運用，建構出真實世界的網頁內容。
你將會學到的
解決網頁版面配置的困擾
可快速將視覺平面稿，完整呈現為HTML
各種HTML版面靈活運用，發揮自己最強實力
├─01 float的介紹
│ 001 float主要用途：選單排列、版面排列、文繞圖.mp4
│ 002 2.float.zip
│ 002 float的原理_left right.mp4
│ 003 .zip
│ 003 直接圖片排排看！float簡單應用(1).mp4
│ 004 直接圖片排排看！float簡單應用(2).mp4
│ 005 5.zip
│ 005 float元素與非float元素的關係.mp4
│ 006 馬上用！ 選單的排列.mp4
│ 007 css的重設：CSS Reset 與 CSS normalize.mp4
│
├─02 float最常令人搞不懂的地方
│ 008 -3.zip
│ 008 CSS中float引起的父元素高度塌陷.mp4
│ 009 父元素高度塌陷解法(一)：overflow_hidden.mp4
│ 010 父元素高度塌陷解法(二)：空標籤clear_both.mp4
│ 011 父元素高度塌陷解法(三)：父元素加偽類clear_both.mp4
│ 012 img.zip
│ 012 父元素高度塌陷解法(四)：display_table.mp4
│ 013 父元素高度塌陷解法(五)：display_flow-root.mp4
│
├─03 position的介紹與實例應用
│ 014 position_static和position_relative.mp4
│ 015 position_fixed和position_absolute.mp4
│ 016 position_ sticky.mp4
│ 017 實例應用(一)_ 捲動固定選單.mp4
│ 018 5..zip
│ 018 實例應用(二)_ 圖文配置-1.mp4
│ 019 實例應用(二)_ 圖文配置-2.mp4
│ 020 實例應用(三)_ 次選單-1.mp4
│ 021 z-index.zip
│ 021 實例應用(三)_ 次選單-2.mp4
│
├─04 讓你驚豔的flexbox排版功能
│ 022 flex.zip
│ 022 Flex的概念.mp4
│ 023 img.zip
│ 023 新增html內容：認養合作夥伴.mp4
│ 024 容器(Container)屬性一_ display, flex-direction, flex-wrap, flex-flow.mp4
│ 025 .zip
│ 025 容器(Container)屬性二_ justify-content, align-items, align-content.mp4
│ 026 項目(Item)屬性一_ order, align-self.mp4
│ 027 flex-grow-flex-shrink-flex-basis-flex.zip
│ 027 項目(Item)屬性二_ flex-grow, flex-shrink, flex-basis, flex.mp4
│ 028 about-img.zip
│ 028 flex應用-about us.mp4
│ 029 flex合併使用.mp4
│
├─05 隨心所欲的gird system排版功能
│ 030 gird system的介紹與瀏覽器支援性.mp4
│ 030 gird-system.zip
│ 031 (1) grid-template-columns, grid-template-rows.mp4
│ 031 columns-rows.zip
│ 032 (2) grid-template-columns, grid-template-rows.mp4
│ 032 repeat.zip
│ 033 areas.zip
│ 033 grid-template-areas, grid-template.mp4
│ 034 grid-column-gap, grid-row-gap, grid-gap.mp4
│ 035 Grid Container的水平垂直_ justify-items, align-items.mp4
│ 036 Grid Item的水平垂直_justify-content, align-content, place-content.mp4
│ 037 content.zip
│ 037 grid-auto-rows, grid-auto-columns.mp4
│ 038 grid-auto-flow.mp4
│ 038 grid-auto.zip
│ 039 grid.mp4
│ 040 area2.zip
│ 040 item grid.mp4
│ 041 item justify-self, align-self, place-self.mp4
│
└─06 gird應用與各網頁調整
042 .zip
042 動物新聞頁面gride-system製作.mp4
043 .zip
043 樣板頁面製作.mp4
044 合作夥伴頁面製作.mp4
045 blog頁面製作.mp4
045 grid-layout.zip
046 about.zip
046 about頁面製作.mp4
047 notice.txt
047 其他頁面的調整.mp4
048 contact.zip
048 layout.zip
048 聯絡我們頁面排版練習與完成網站檔案.mp4
|
專業知識教學
