距離上次分享CSS語法是在四個月之前！中間距離感覺好久啊！今天分享網頁履歷製作，這堂CSS課真的全部學完應該可以變成基礎的HTML/CSS前端工程師了！
前面一個學習分享jade(pug)的文章，有說到下一份作業是製作個人簡歷網頁，我在pinterest上面找了一張好看的簡歷圖，試著自己製作結果發現還有好多問題要克服！
不過自己製作的過程克服困難真的會印象深刻呢！只能說CSS真的很少可以有一步做完跟著一步，最後變很強的課程，這一堂 動畫互動網頁程式入門 (HTML/CSS/JS) 適合當作一個課程大綱，
老師示範作業之餘，還是需要自行上網或借書來增強自己的CSS實力喔！不過這一堂課已經是CP值爆高的一門課了，售價是兩千元價值應該有兩萬左右的內容吧！
參考原型
這張網頁的架構主要有上(top)、下(bottom)兩塊切版的大div區塊，再各自包覆左跟右的小div區塊。
當初原先設定寬度大約1200px左右，發現超出了滑桿的範圍就縮小左右至1000px，然後一不小心刪到一個</div>就跑版了，真的還是用jade(pug)來開發真的比較方便呢！
遇到的困難之一就是關於圖片大小的設定，想說為什麼圖片只能更改高度而寬度無法更改？後來發現多新增一個 img 去設定寬高之後就可以成功設定圖片了，真是每一步都要自行克服呢，無法呈現一定是哪裡語法有錯，程式這東西就是不會背叛你，有錯就是哪裡有BUG。
再來就是關於SKILL技能條部分，上網看了許多相關技能條教學，發現每一個製作都過於複雜，絕望之際想到可以參考同學的製作方法，雖然不情願但是還是放下身段看他們怎麼寫，所謂 模仿雖可恥但有用啊！
其實老師影片中大致說到怎麼製作，不過看了同學的作業之後知道，原來就是一個框框一個div，裡面的進度條包在外面的div裡面，長度只要設定寬width就好了！
CSS部分外框都設定line1，裡面進度條設定line2~line5分別設定不同長度，如此就完成了簡易的進度條設定，其實是技能數值條啦！
最下方contact部分加上本部落格最常用的hover，滑鼠移入發生的變化，讓電腦用點擊時更能有按鈕的感覺。
面臨到的問題是圖片的HTML語法都是放到最下面，再用絕對定位到相對應的位置，不曉得為何放到該曾div裡面會被其他東西遮住還是不見，需要再督加研究。
這份作業其實中間卡關很久，對於老手來說非常簡單的一份作業，對於新手來說面對到問題需要花時間解決，真的凡事沒有輕鬆的學習，都需要花時間跟精力才能完成一項技能學習呢！有機會再分享更多這一門課的相關學習吧！
相關文章推薦
請先 登入 以發表留言。