北京
找工作時遞上一份自己寫的網頁簡歷，面試官會是什么反應？
對很多剛畢業的開發者來說，簡歷是敲門磚。但大多數人選擇下載模板，少數人直接用HTML和CSS手寫一份——后者往往能在面試開場就制造話題。
這不是炫技，而是一個合理的切入點：你已經學了基礎標簽和樣式，正好用真實需求來練手。
拆解思路：先分塊，再填充
蓋房子要先畫圖紙。把簡歷頁面當成一塊地皮，用容器（container）圈定范圍，再按1:3的比例切成左右兩欄——左邊放個人信息，右邊鋪經歷詳情。
這種分法很樸素：左側窄欄固定展示頭像、聯系方式，右側寬欄留給動態內容，招聘方掃一眼就能抓住重點。
材料清單：7樣東西
具體需要哪些"建材"？
1.Divisions（分區）：用div切分頁面，給每個區域起唯一名字，方便后續精準加樣式
2.Headings（標題）：h1到h6層級，把"教育背景""工作經歷"這些模塊標出來
3.Paragraph（段落）：自我描述、項目細節都用p標簽包裹
4.Measurements（尺寸）：height、width、color這些屬性控制視覺呈現
5.Image（圖片）：頭像或作品截圖
6.Table（表格）：技能評分、時間線等行列數據
7.Display和Directions（布局與方向）：flex或grid決定元素怎么排，方向屬性控制閱讀流
另外會用到語義化標簽——header放頁眉，nav留給導航（如果有作品集鏈接），footer塞版權和聯系方式。這些標簽對瀏覽器和開發者都自解釋，比一堆無意義的div更專業。
核心代碼：容器怎么寫
容器是地基。示例里的CSS長這樣：
/*Class Selector*/
.container {
/* border: 1px solid red; */
height: 100vh; /* View Port Height */
width: 70vw; /* View Port Width */
margin: auto;
display: grid;
grid-template-columns: 1fr 2fr; /* 左右分欄 */
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
注釋掉的紅色邊框是調試用的，畫完分區就刪掉。100vh讓容器撐滿整個視口高度，70vw控制寬度避免在大屏上攤得太開，margin: auto實現居中。grid布局用1fr和2fr的比例，正好對應前面說的1:3分割。
陰影那行是視覺加分項，讓簡歷紙從背景里浮出來一點，像真實的A4紙放在桌面上。
為什么從這個項目開始
網頁簡歷有幾個隱性好處：
第一，成果立刻可見，改一行代碼刷新就能看到效果，正反饋很快。
第二，天然覆蓋HTML和CSS的核心知識點——盒模型、選擇器、布局系統、響應式基礎。
第三，面試時有實物可講，從設計決策到技術難點都能展開。
比起做假想的練習題，解決自己的真實需求更容易堅持。而且這份簡歷本身就可以放進作品集。
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
