Layout (佈局)

666803

使用 HTML、CSS 開發一個網站

六角學院線上資源

2020 VS Code 網頁編輯器、HTML 基礎教學

課程最終任務說明
安裝 Chrome 瀏覽器 (2:15)
安裝 VS Code 編輯器 (3:36)
安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
開始撰寫 HTML (6:27)
撰寫 h1 標籤、 p 段落 (8:11)
CodePen 教學 - 將你的程式碼分享給別人 (4:20)
建立 HTML 環境 (7:40)
HTML 環境語法
Emmet 載入環境語法 (6:29)
插入圖片，了解圖片路徑規則 (8:48)
載入外部圖片方式 (4:30)
在網頁上加上 a 連結標籤 (6:18)
段落 p 與連結 a 的混合應用 (3:08)
認識 ul li 列表標籤 (8:26)
HTML 標籤教學 - 小節作業 (3:55)

2020 CSS 常用語法

HTML 與 CSS 的差異 (3:37)
插入 CSS 檔案，先寫一個 h1 讓文字變色 (5:48)
CSS 寫法詳解介紹 (4:38)
新手常見 CSS 錯誤解析 (9:30)
HTML 標籤選擇器 (5:43)
擬態選擇器 :hover (6:07)
類別選擇器 (13:06)
使用 CSS 優化文字排版 (10:16)
在 HTML 標籤上加入線條 (8:10)

2020 使用 CSS 變更 HTML 標籤特性

網頁容器介紹 (6:50)
CSS Reset - 清空瀏覽器預設樣式 (11:42)
display: block 區塊元素介紹 (12:39)
display: inline 行內元素介紹 (12:15)
display 容器特性 - 區塊跟行內 (5:49)
div 與後代選擇器運用 (14:44)
margin 產生外邊界距離 (11:52)
padding 產生留白距離 (6:17)
margin、padding 投影片介紹 (2:04)
Box Model（盒模型）詳細介紹 (10:54)
margin 0 auto 區塊水平置中 (10:15)
text-align 文字水平調整 (5:16)
2020補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (5:11)

Flex 網頁排版技巧

Flex 排版技巧介紹 (4:32)
CodePen 講解 Flex 技巧 (1:47)
Flex 外層屬性 (container) 介紹上集 (11:53)
Flex 外層屬性 (container) 介紹下集 (9:20)
主軸介紹 - 要熟練 Flex ，必修軸線技巧 (2:13)
flex-direction - 決定 flex 軸線 (6:16)
justify-content - 決定主軸對齊方式 (11:45)
設計一個 Flex 並排選單吧！ (8:10)
flex-wrap - 決定換行屬性 (4:29)
align-items - 交錯軸對齊方式 (7:07)
透過 VS Code 插件，開啟一個即時預覽的 Web Server (5:02)
Flex 練習前置作業 (9:26)
Flex 小節作業 (16:50)

Flex 精神時光屋

網頁排版技巧 Part II

切圖技巧

表格與表單設計技巧

CSS3技巧

CSS3 圓弧效果 (5:22)
CSS3 漸層效果 (6:43)
CSS3 陰影效果 (5:06)
使用 can I use 查詢 HTML、CSS 瀏覽器兼容度 (5:38)
使用 Statcounter 瀏覽各國瀏覽器趨勢 (8:05)
Statcounter 說明

最後，讓你的網頁變得更專業

開發多頁式網站實戰講解

前言介紹 (1:46)
環境架設 (6:42)
Layout (佈局) (4:48)
保持網頁靈活彈性的技巧 (2:59)
CSS 管理方法 (3:27)
總結 (2:04)

接下來，你還可以學什麼？

2022 網站架設全攻略

架設網站神器簡介 - GitHub Desktop (2:52)
註冊 GitHub 服務 (4:21)
部署網站(Mac 版)：GitHub Desktop 部署網站流程 (17:59)
部署網站(Windows 版)：GitHub Desktop 部署網站流程 (14:36)
Mac、Win：如何更新網站、再新增一個網站空間 (10:28)
主動提交您的網站到 Google：Google Search Console (8:20)
尋找有效流量：整合 Google Analytics 服務，客戶來源一把抓 (8:38)
優化 SEO 3 技巧：讓頁面排名到最前面 (7:50)
六角六週年生日活動：您的鼓勵，是我們進步的最大原動力

-- 舊版課程章節分隔線 --

網頁編輯器、HTML基礎教學

CSS 常用語法

CSS 標籤選擇器 - 插入 CSS 檔案，讓文字變大變顏色吧！ (12:16)
套用第一個 Sublime Plugin，利用 emmet 提升寫 HTML、CSS 效率 (12:20)
CSS 類別選擇器 - 如何透過 Class 來指定 HTML 樣式 (6:21)
CSS 擬態選擇器 - 設計 a 連結動作觸發樣式 (6:33)
使用 CSS 設定優化文字排版 (8:35)
在 HTML 標籤上加上線條 (border) (5:41)
作業：優化第一節作業吧！ (2:50)
第二章測驗

使用 CSS 變更 HTML 標籤特性

CSS Reset，讓所有瀏覽器都長得一致 (9:06)
行內元素與區塊元素的差異 (9:08)
DIV 與 SPAN 的使用時機、CSS 後代選擇器 (11:43)
使用 margin、padding 來推擠距離 (6:37)
Box Model（盒模型） (7:45)
使用 margin: auto 讓版型置中 (8:23)
作業：優化第二節作業吧 (3:04)
第三章測驗
補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (9:02)
CODEPEN：線上撰寫網頁服務 (5:58)

網頁排版技巧 Part I

/courses/666803/lectures/11948637/hotmart_lecture_video_download_link/41552489

666803