前置準(zhǔn)備（10分鐘搞定，不學(xué)浪費(fèi)時(shí)間）

1. 工具準(zhǔn)備：安裝VS Code編輯器 + 開(kāi)啟瀏覽器開(kāi)發(fā)者工具，全程只用這兩個(gè)工具，拒絕花里胡哨軟件
2. 認(rèn)知鋪墊：花30分鐘分清HTML基礎(chǔ)標(biāo)簽，弄懂「HTML搭結(jié)構(gòu)，CSS做樣式」核心關(guān)系，不用精通HTML，夠用即可

第一步：吃透基礎(chǔ)語(yǔ)法+三種引入方式（1天，筑牢底層地基）

本階段學(xué)習(xí)目標(biāo)

具體學(xué)習(xí)內(nèi)容

1. 掌握固定語(yǔ)法格式：選擇器 { 屬性: 值; }，牢記每行代碼末尾必須加分號(hào)
2. 分清三種CSS引入方式以及適用場(chǎng)景：行內(nèi)樣式（臨時(shí)調(diào)試）、內(nèi)部樣式（單頁(yè)面）、外部樣式表（正式網(wǎng)站，重點(diǎn)掌握）
3. 理解樣式優(yōu)先級(jí)：行內(nèi)>內(nèi)部>外部，解決樣式莫名失效的基礎(chǔ)問(wèn)題

階段實(shí)操

本階段禁止學(xué)

第二步：掌握高頻基礎(chǔ)樣式（2天，搞定網(wǎng)頁(yè)基礎(chǔ)美化）

本階段學(xué)習(xí)目標(biāo)

具體學(xué)習(xí)內(nèi)容（只學(xué)高頻，冷門(mén)直接跳過(guò)）

• 文本樣式：字體大小、顏色、行高、文本居中、字體加粗
• 盒子基礎(chǔ)：寬高、背景色、邊框、圓角
• 間距樣式：內(nèi)邊距padding、外邊距margin（分清內(nèi)外間距區(qū)別）

階段實(shí)操

關(guān)鍵加分操作

第三步：精通三大核心選擇器（1天，精準(zhǔn)控制頁(yè)面元素）

本階段學(xué)習(xí)目標(biāo)

具體學(xué)習(xí)內(nèi)容

1. 元素選擇器：統(tǒng)一修改同類(lèi)標(biāo)簽樣式
2. 類(lèi)選擇器（重中之重）：開(kāi)發(fā)最常用，自由歸類(lèi)元素，精準(zhǔn)單獨(dú)修改模塊
3. ID選擇器：唯一標(biāo)識(shí)單個(gè)元素，固定模塊使用

階段實(shí)操

第四步：吃透盒子模型（1天，弄懂網(wǎng)頁(yè)布局底層邏輯）

本階段學(xué)習(xí)目標(biāo)

具體學(xué)習(xí)內(nèi)容

避坑重點(diǎn)

第五步：主攻Flex彈性布局（2天，搞定95%網(wǎng)頁(yè)排版）

本階段學(xué)習(xí)目標(biāo)

具體學(xué)習(xí)內(nèi)容

1. 開(kāi)啟彈性布局：display: flex
2. 水平居中、垂直居中（前端最高頻用法）
3. 元素均分排列、自動(dòng)換行、間距分配

核心建議

階段實(shí)操

第六步：簡(jiǎn)單交互+響應(yīng)式+實(shí)戰(zhàn)復(fù)盤(pán)（2天，完整落地頁(yè)面）

本階段學(xué)習(xí)目標(biāo)

具體學(xué)習(xí)內(nèi)容

1. CSS偽類(lèi)hover：鼠標(biāo)懸浮變色、卡片上浮、按鈕交互，不用JS也能做動(dòng)態(tài)效果
2. 媒體查詢(xún)基礎(chǔ)：簡(jiǎn)單響應(yīng)式，電腦端大屏排版，手機(jī)端自動(dòng)適配單列排版
3. 瀏覽器調(diào)試實(shí)戰(zhàn)：學(xué)會(huì)自查樣式?jīng)_突、代碼報(bào)錯(cuò)，獨(dú)立解決bug

最終大實(shí)戰(zhàn)

通用每日高效學(xué)習(xí)流程（每天1小時(shí)，直接照搬）

1. 10分鐘：復(fù)盤(pán)昨日代碼，回顧易錯(cuò)點(diǎn)
2. 20分鐘：學(xué)習(xí)當(dāng)天新知識(shí)點(diǎn)，看懂原理
3. 20分鐘：手寫(xiě)代碼+修改參數(shù)，觀(guān)察頁(yè)面視覺(jué)變化
4. 10分鐘：自主排查bug，記錄當(dāng)日踩坑點(diǎn)

建站公司總結(jié)：6步學(xué)習(xí)核心邏輯