Web前端開發(fā)實(shí)驗(yàn)操作報(bào)告四、實(shí)驗(yàn)結(jié)果與分析（一）頁(yè)面效果驗(yàn)證靜態(tài)結(jié)構(gòu)：語(yǔ)義化標(biāo)簽使頁(yè)面結(jié)構(gòu)清晰，ChromeDevTools的“Lighthouse”檢測(cè)顯示“可訪問(wèn)性”得分90+；視覺(jué)設(shè)計(jì)：Flex/Grid布局實(shí)現(xiàn)響應(yīng)式，移動(dòng)端導(dǎo)航垂直排列，作品卡片自適應(yīng)寬度；hover動(dòng)畫流暢，色彩搭配協(xié)調(diào)；交互功能：TODO模塊可穩(wěn)定運(yùn)行，任務(wù)增刪改查無(wú)卡頓，本地存儲(chǔ)數(shù)據(jù)持久化（刷新頁(yè)面后任務(wù)仍存在）。（二）技術(shù)難點(diǎn)與解決1.Grid布局適配問(wèn)題：初始`grid-template-columns`參數(shù)錯(cuò)誤，導(dǎo)致小屏幕下卡片間距異常。通過(guò)查閱MDN，將`minmax(300px,1fr)`改為`minmax(280px,1fr)`，適配更小設(shè)備；2.JavaScript索引錯(cuò)誤：刪除任務(wù)時(shí)因`splice`參數(shù)理解偏差，導(dǎo)致刪錯(cuò)任務(wù)。通過(guò)`console.log(index)`打印調(diào)試，確認(rèn)索引與任務(wù)的對(duì)應(yīng)關(guān)系，修正邏輯；3.樣式?jīng)_突：導(dǎo)航與作品的`<a>`標(biāo)簽樣式混淆。通過(guò)添加類名（如`.nav-link`）并限定作用域（`header.nav-link`），避免全局樣式污染。五、實(shí)驗(yàn)總結(jié)與展望（一）收獲與反思本次實(shí)驗(yàn)從“靜態(tài)結(jié)構(gòu)”到“動(dòng)態(tài)交互”的全流程實(shí)踐，讓我深刻理解：CSS現(xiàn)代布局（Flex/Grid）大幅簡(jiǎn)化了響應(yīng)式開發(fā)，配合CSS變量可實(shí)現(xiàn)高效的樣式管理；JavaScript交互需結(jié)合調(diào)試工具（如ChromeDevTools的Sources面板），快速定位邏輯錯(cuò)誤。不足在于：未引入前端框架（如Vue），組件化復(fù)用性不足；性能優(yōu)化（如圖片懶加載）待加強(qiáng)；測(cè)試環(huán)節(jié)僅依賴手動(dòng)驗(yàn)證，缺乏自動(dòng)化測(cè)試。（二）未來(lái)改進(jìn)方向1.框架學(xué)習(xí)：深入學(xué)習(xí)Vue/React，將TODO模塊重構(gòu)為組件化形式，提升代碼復(fù)用性；2.性能優(yōu)化：引入Lighthouse工具，優(yōu)化圖片加載（如Picsum.photos懶加載）、CSS動(dòng)畫硬件加速（`transform:translateZ(0)`）；3.全棧拓展