分享一個(gè)可以“趁別人喝咖啡的功夫“”寫完的一個(gè)靜態(tài)網(wǎng)頁(yè)，純純練手小項(xiàng)目，適合前端剛?cè)腴T的小白練練手。

環(huán)境：VScode編輯器

語(yǔ)言：HTML 、CSS

完整代碼文件及圖片獲取方式

**搜索公粽號(hào)＠李橋桉，回復(fù)【家居網(wǎng)首頁(yè)①】即可**

一、實(shí)現(xiàn)效果圖

僅僅通過(guò)html、CSS最簡(jiǎn)單的一些代碼基礎(chǔ)就可以實(shí)現(xiàn)，是一個(gè)靜態(tài)的網(wǎng)頁(yè)，沒(méi)有很復(fù)雜。涉及到的一些基礎(chǔ)知識(shí)如下：

1- px像素、顏色；2-開(kāi)發(fā)環(huán)境搭建、vscode配置；3-網(wǎng)頁(yè)的基本結(jié)構(gòu)；4-CSS常用樣式基礎(chǔ)；5-html常用標(biāo)簽；6-布局常用的css樣式基礎(chǔ)；7-盒模型基礎(chǔ)；8-浮動(dòng)原理；9-列表標(biāo)簽；10-字體樣式、文本樣式11-偽類、組合選擇器、偽元素；12-CSS繼承；13-圖文混排；14-背景樣式；15-文本格式化、特殊標(biāo)簽、錨點(diǎn)、字體圖標(biāo)；等。

圖片素材來(lái)源：蝸牛學(xué)苑

二、CSS代碼如下

三、HTML 代碼如下

四、源碼及圖片素材獲取

完整代碼文件及圖片獲取方式

**搜索公粽號(hào)＠李橋桉，回復(fù)【家居網(wǎng)首頁(yè)①】即可**