學習路線
03分鐘54秒HTML簡介
00分鐘36秒網頁的相關概念
07分鐘44秒常用瀏覽器以及內核
04分鐘44秒web標準
07分鐘32秒HTML標籤導讀
01分鐘01秒HTML語法規範
07分鐘11秒HTML基本結構標籤
07分鐘15秒VSCode工具建立頁面
06分鐘36秒DOCTYPE和lang以及字元集的作用
08分鐘56秒標籤語義
02分鐘22秒標題標籤
05分鐘14秒段落標籤和換行標籤
06分鐘23秒體育新聞案例
04分鐘24秒文字格式化標籤
07分鐘57秒div和span標籤
04分鐘43秒圖像標籤（上）
09分鐘13秒圖像標籤（下）
04分鐘14秒圖像標籤注意點
02分鐘47秒目錄資料夾和根目錄
06分鐘30秒相對路徑（上）
06分鐘07秒相對路徑（下）
02分鐘56秒絕對路徑
03分鐘20秒連結標籤（上）
08分鐘38秒連結標籤（下）
09分鐘16秒錨點連結
07分鐘02秒註釋標籤和特殊字符
08分鐘18秒綜合案例（上）
10分鐘36秒綜合案例（下）
05分鐘13秒HTML標籤（下）導讀
01分鐘11秒表格標籤基本上使用
08分鐘10秒表頭單元格標籤
02分鐘30秒表格相關屬性（了解）
08分鐘24秒小說排行榜案例
09分鐘25秒表格結構標籤
04分鐘45秒合併儲存格
08分鐘30秒表格總結
03分鐘46秒無序列表
08分鐘44秒有序列表
03分鐘16秒自訂列表
06分鐘37秒列表總結
02分鐘52秒表單使用場景以及分類
04分鐘19秒表單域
05分鐘25秒input之type屬性文字方塊與密碼框
06分鐘32秒input之type屬性單選按鈕與複選框
04分鐘36秒input之name和value屬性
05分鐘49秒input之checked和maxlength屬性
03分鐘32秒input表單元素四個屬性使用場景課堂問答
03分鐘03秒input之type屬性提交與重置按鈕
06分鐘27秒input之type屬性普通按鈕與檔案域
04分鐘13秒label標籤
06分鐘08秒select下拉表單
05分鐘41秒textarea文字域標籤
05分鐘13秒表單元素幾點總結
02分鐘50秒註冊頁面（一）
08分鐘23秒註冊頁面（二）
08分鐘58秒註冊頁面（三）
05分鐘23秒註冊頁面（四）
03分鐘59秒學會查閱文檔
06分鐘14秒CSS層疊樣式表導讀
01分鐘08秒CSS簡介
05分鐘09秒體驗CSS文法規範
07分鐘17秒CSS程式碼風格
04分鐘42秒css選擇器的作用
03分鐘34秒標籤選擇器
06分鐘01秒類別選擇器
10分鐘31秒使用類別選擇器畫盒子
05分鐘17秒類別選擇器特殊使用-多類別名
08分鐘02秒id選擇器
06分鐘23秒通配符選擇器
05分鐘04秒font-family設定字體系列
07分鐘39秒font-size字號大小
04分鐘01秒font-weight字體粗細
08分鐘09秒font-style字體樣式
03分鐘06秒font複合屬性寫法
07分鐘46秒字體屬性總結
03分鐘01秒文字顏色color
05分鐘57秒文字對齊text-align
03分鐘06秒文字裝飾text-decoration
05分鐘04秒文字縮排text-indent
05分鐘26秒行間距line-height
08分鐘09秒css文字屬性總結
03分鐘01秒內部樣式表
04分鐘25秒行內樣式表
04分鐘05秒外部樣式表
05分鐘04秒css引入方式總結
02分鐘11秒新聞頁面
06分鐘03秒修改樣式（一）
04分鐘45秒修改樣式（二）
07分鐘40秒修改樣式（三）
03分鐘09秒chrome調試工具使用
07分鐘04秒css第二天導讀
01分鐘29秒emmet語法產生html標籤
09分鐘57秒emmet語法快速產生css樣式
03分鐘08秒快速格式化程式碼
05分鐘27秒複合選擇器簡介
01分鐘36秒後代選擇器
08分鐘57秒子元素選擇器
03分鐘18秒課堂練習
02分鐘54秒並集選擇器
06分鐘14秒連結偽類選擇器（上）
09分鐘39秒連結偽類選擇器（下）
05分鐘36秒focus偽類選擇器
03分鐘01秒複合選擇器總結
03分鐘03秒什麼是元素顯示模式
04分鐘16秒塊元素
06分鐘38秒行內元素
05分鐘32秒行內塊元素
03分鐘39秒元素顯示模式總結
03分鐘22秒顯示模式的轉換
08分鐘12秒一個小工具snipaste的使用
04分鐘44秒簡潔版小米側邊欄案例
07分鐘29秒單行文字垂直居中的原理
07分鐘07秒背景顏色
03分鐘59秒背景圖片
04分鐘22秒背景平鋪
05分鐘12秒背景位置-方位名詞
07分鐘29秒背景位置案例一
06分鐘57秒背景位置案例二-王者榮耀背景圖片
04分鐘57秒背景位置-精確單位
04分鐘01秒背景位置-混合單位
04分鐘07秒背景固定
04分鐘20秒背景屬性複合寫法
03分鐘03秒背景顏色半透明
06分鐘28秒背景總結
03分鐘40秒綜合案例五彩導航（上）
07分鐘01秒綜合案例五彩導航（二）
03分鐘34秒層疊性
04分鐘18秒繼承性
04分鐘40秒行高的繼承
09分鐘31秒優先權
06分鐘31秒優先註意的問題
07分鐘42秒CSS權重的疊加
06分鐘47秒權重兩個練習題
05分鐘25秒盒子模型導讀
01分鐘13秒看透網頁佈局本質
03分鐘56秒盒子模型組成部分
03分鐘33秒盒子模型邊框border
07分鐘31秒邊框的複合寫法
07分鐘49秒表格細線邊框
05分鐘29秒邊框會影響盒子實際大小
03分鐘40秒盒子模型內邊距padding
04分鐘05秒padding複合屬性
06分鐘02秒padding會影響盒子實際大小
04分鐘45秒padding應用程式-新浪導覽列（上）
06分鐘09秒padding應用程式-新浪導航（下）
05分鐘47秒小米側邊欄修改
02分鐘56秒padding不會撐開盒子的情況
04分鐘53秒盒子模型外邊距margin
06分鐘31秒外邊距典型應用--塊級盒子水平居中對齊
03分鐘39秒行內元素和行內塊元素水平居中
02分鐘41秒外邊距合併-相鄰塊元素垂直外邊距
04分鐘14秒外邊距合併-巢狀區塊元素塌陷
06分鐘01秒清除內外邊距
04分鐘51秒ps的基本操作
05分鐘36秒綜合案例-產品模組佈局分析
02分鐘14秒綜合案例-box佈局
03分鐘38秒綜合案例-圖片和段落製作
06分鐘05秒綜合案例-評估與詳情製作
06分鐘28秒綜合案例-垂直線細節製作
04分鐘11秒老師解惑
05分鐘15秒快報模組佈局分析
02分鐘11秒快報模組頭部製作
06分鐘15秒快報模組列表製作
07分鐘39秒圓角邊框原理
06分鐘20秒圓角邊框的使用
07分鐘43秒盒子陰影
09分鐘04秒文字陰影
01分鐘54秒浮動導讀
02分鐘05秒傳統網頁版面三種方式
04分鐘43秒為什麼需要浮動
05分鐘16秒什麼是浮動
04分鐘46秒浮動特性-脫標
06分鐘33秒浮動特性-浮動元素一行顯示
03分鐘48秒浮動特性-浮動元素具有行內塊特性
04分鐘52秒浮動元素經常搭配標準流的父元素
03分鐘09秒浮動版面練習-1
04分鐘04秒浮動版面練習-2
09分鐘17秒浮動練習-手機模組（上）
06分鐘05秒浮動練習-手機模組（下）
05分鐘00秒常見的網頁佈局
10分鐘39秒浮動的兩個注意點
07分鐘47秒為什麼清除浮動
10分鐘17秒清除浮動本質以及額外標籤法
07分鐘51秒清除浮動之父元素overflow
02分鐘33秒清除浮動之after偽元素
05分鐘04秒清除浮動之雙偽元素
03分鐘02秒清除浮動
02分鐘49秒常見的圖片格式
03分鐘44秒圖層切圖（上）
04分鐘48秒圖層切圖（下）
04分鐘59秒切片工具
07分鐘19秒cutterman安裝
04分鐘35秒cutterman使用技巧
06分鐘04秒準備工作
06分鐘40秒css屬性書寫順序（重要）
04分鐘56秒頁面佈局整體思路
05分鐘30秒header區域製作
08分鐘08秒logo區域製作
04分鐘40秒導覽列nav區域製作（上）
06分鐘24秒導覽列nav區域製作（中）
05分鐘59秒導覽列nav區域製作（下）
02分鐘54秒搜尋search模組input製作
08分鐘36秒搜尋search模組button製作
05分鐘27秒使用者user模組製作
04分鐘55秒banner模組製作
06分鐘31秒subnav模組製作（上）
05分鐘56秒subnav模組製作（下）
03分鐘17秒course模組製作（上）
04分鐘29秒course模組製作（中）
03分鐘20秒course模組製作（下）
07分鐘35秒精品推薦模組（上）
03分鐘42秒精品推薦模組（中）
03分鐘34秒精品推薦模組（下）
04分鐘51秒box-hd模組製作
07分鐘22秒box-bd模組製作
05分鐘41秒box模組完成
05分鐘54秒footer模組製作
04分鐘46秒copyright模組製作
06分鐘15秒links模組製作
04分鐘35秒定位導讀
00分鐘59秒為什麼需要定位
03分鐘43秒定位組成
04分鐘11秒相對定位
08分鐘16秒絕對定位-沒有父級或父級無定位狀況
07分鐘16秒絕對定位-父級有定位狀況
06分鐘04秒絕對定位脫標的不佔有原來位置
02分鐘07秒子絕父相的由來
07分鐘07秒子絕父相案例-hot模組
07分鐘47秒固定定位
07分鐘26秒固定定位小技巧-固定到版心右側
06分鐘30秒黏性定位（了解）
05分鐘10秒定位總結
02分鐘42秒定位的疊放順序
07分鐘18秒絕對定位的盒子居中演算法
07分鐘45秒定位的特殊特性
02分鐘47秒浮動元素不會壓住標準流的文字定位會
05分鐘09秒佈局分析
03分鐘07秒大盒子製作
左側箭頭按鈕製作
07分鐘45秒右側箭頭按鈕製作
ul盒子模組製作
li小圓點模組製作
網頁佈局總結
display顯示隱藏元素
06分鐘39秒visibility顯示隱藏元素
overflow溢出顯示隱藏
馬鈴薯案例（上）
馬鈴薯案例（下）
導讀
01分鐘25秒為什麼需要精靈技術
04分鐘57秒精靈圖使用（原理）
06分鐘18秒精靈圖使用（程式碼）
06分鐘30秒精靈圖案例-拼出自己名字
07分鐘32秒字體圖示產生和優點
05分鐘10秒字型圖示下載
05分鐘50秒字體圖示的使用
08分鐘20秒字體圖示的追加與載入原理
04分鐘06秒CSS三角的做法
05分鐘14秒CSS三角應用-京東效果
03分鐘48秒使用者介面-滑鼠樣式
使用者介面-取消表單輪廓和防止拖曳文字域
vertical-align實作行內塊和文字垂直居中對齊
圖片底側空白縫隙解決方案
單行文字溢出省略號顯示
多行文字溢位省略號顯示
版面技巧-margin負值巧妙運用（上）
版面技巧-margin負值巧妙運用（下）
版面技巧-文字圍繞著浮動元素巧妙運用
佈局技巧-行內塊的巧妙運用
佈局技巧-CSS三角形巧妙運用（上）
佈局技巧-CSS三角形巧妙運用（下）
CSS初始化
HTML5CSS3提高導讀
新增語義化標籤
新增影片標籤
新增音訊標籤
新增input表單
新增表單屬性
屬性選擇器（上）
屬性選擇器（下）
結構偽類選擇器-選擇第n個元素
nth-child選擇器（上）
nth-child選擇器（下）
nth-child和nth-of-type的區別
偽元素選擇器使用場景和由來
偽元素選擇器基本使用
偽元素選擇器使用場景-配合字體圖標
偽元素使用場景-仿馬鈴薯效果
偽元素選擇器-偽元素清除浮動本質
CSS3盒子模型border-box
CSS3圖片模糊處理
計算盒子寬度calc函數
CSS3新增屬性轉場（上）
CSS3新增屬性轉換（下）
CSS3過渡練習
廣義的H5（了解）
導讀
00分鐘48秒網站製作流程
05分鐘05秒品優購項目規劃
品優購項目搭建
品優購項目-樣式的模組化開發
品優購項目-favicon圖示製作
品優購項目-TDK三大標籤SEO優化
品優購首頁-快捷導航shortcut結構搭建
品優購首頁-快捷導航左側製作
品優購首頁-快捷導航右側搭建
品優購首頁-快速導航右側字體圖標
品優購首頁-header頭部模組搭建
04分鐘30秒品優購首頁-logoSEO優化（上）
06分鐘54秒品優購首頁-logoSEO優化（下）
04分鐘21秒品優購首頁-search搜尋模組（上）
06分鐘14秒品優購首頁-search搜尋模組（下）
品優購首頁-hotwords熱詞模組
品優購首頁-shopcar模組製作
品優購首頁-count購物車統計模組
品優購首頁-nav導覽模組搭建
品優購首頁-dropdown模組製作
品優購首頁-導覽詳細分類製作（上）
品優購首頁-導覽詳細分類製作（下）
品優購首頁-navitems模組製作
品優購首頁-footer底部模組搭建
品優購首頁-mod-servecie模組製作（上）
品優購首頁-mod-servecie模組製作（下）
品優購首頁-mod_help模組製作
品優購首頁-mod_copyright模組製作
品優購首頁-main主體盒子搭建
品優購首頁-newsflash模組
品優購首頁-news-hd模組製作
品優購首頁-new-bd模組製作
優質購首頁-lifeservice製作（上）
06分鐘30秒品優購首頁-lifeservice製作（下）
07分鐘04秒品優購首頁-推薦模組recom（上）
品優購首頁-推薦模組recom（下）
品優購首頁-家用電器模組搭建
品優購首頁-家用電器模組頭部製作
tab欄選項卡原理佈局需求
品優購首頁-tab_list-item佈局（上）
品優購首頁-tab_list-item佈局（中）
品優購首頁-tab_list-item佈局（下）
品優購清單-結構搭建
品優購清單頁-秒殺模組製作
品優購清單頁-導覽模組修改
品優購列表頁-一個小問題
品優購清單頁-結束
品優購註冊頁-header製作
品優購清單頁-註冊主體模組頭部製作
品優購註冊頁-註冊主體製作（上）
品優購註冊頁-註冊主體製作（下）
04分鐘45秒品優購註冊頁-安全程度模組
品優購註冊頁-同意模組和完成註冊模組
品優購項目頁面相互跳轉以及作業安排
什麼是伺服器
申請免費空間以及網站上傳
1.web端佈局：先講解HTML5常用標籤，接著講解CSS3常見樣式增加的H5C3新特性，新語法，最後講解PC端品優購項目。以及CSS3動畫 2d 3d效果。 2.行動端佈局：主要講解視窗、二倍圖、流失佈局，flex佈局，rem佈局，響應式佈局，也會增加摹客使用等工具。
