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