引言
-
最近準備找個web前端的工作，但由於自己本科的專業不是計算機或者軟件類的，因此在與面試官溝通過程中，很難說明自己的能力，鑑於此，我決定做兩件事，其一，總結自己所學的知識，彙總成知識框架，其二，模仿一些頁面製作一些demo作品，用於說明自身能力。
-
項目的模仿計劃了三個部分內容，一個是模仿製作resume網頁(http://www.show08.com/)，用來承載自己的簡歷；另一個是模仿一個博客網站，用來存放自己所寫的博客(可選擇：http://www.2019w.cn/) ；再一個是模仿一個自己喜歡的網站，我選擇模仿B站(https://www.bilibili.com/)。
- 雖然可能無法做到每一個特效都一模一樣，但我會盡量在這個過程中尋找到最適合我的編程方式以及庫的使用。
resume網頁
- 所選擇的target網頁
這是我所選markdown 縮進擇的resume網站的模仿對象，整體來看，用了swiper的滑動頁面，用了定時切換背景圖片，用了播放背景音樂，用了圖標變化，用了position定位，用了自定義字體。
- 那麼先分析一下該網站首頁的佈局。
如上圖所示，即爲該網站首頁的佈局。
- 在此基礎上，用emmet的語法生成該頁面的佈局：
div.container>(div.selfBlog>div.selfPic+div.selfName)+
(div.selfIntro>div.welcome+div.motto+div.welName+div.welOccu+div.welEmail)
+(div.rightNav>div.rigBtn+div.rigLi+div.rigPlayer)+div.talkToMe
- 在經歷了一系列的css調整之後，用html+css得到了首頁的佈局圖，如下：
- 如法炮製以上步驟，得到這些過程：
以上爲目標網頁的佈局圖片2-7
ps:由於浮動元素相同，則均使用首頁佈局中的內容，每頁內容滾動僅爲不相同元素