這一門HAHOW課叫做 動畫互動網頁程式入門 (HTML/CSS/JS)
因為工作上需要接交到電子報的部分，所以單位補助讓我可以線上學習HAHOW課程，沒想到電子報簡單，寫語法才真的大有學問。
今天要跟大家分享的是課程第一份作業，也就是名片的設計，我透過反逆的御宅族 當作對象，製作一張專屬的網頁名片。
課程中老師最後的成果如下：
作業中會使用到一些基礎語法，簡單分享一下網頁語法架構。老師範例CODEPEN
首先需要先將HTML做一些定義，總共分為三階層，中間層為NAMECARD(名片)，裡面包含大標(姓名)、職稱、下方文字介紹，而那兩個色圈圈是在NAMECARD的下方，再加一個DIV，使用radius圓角來製作並定位。
後方大大的字NAMECARD，則是在剛剛說的中間層名片的前方，再加一個DIV，大小設300px左右，使用html,body的margin跟padding設為0px填滿整個內容，BODY上下各加入一個實線，就是整個架構。
而我的作品如下：
其實在實作過程中，身為新手的我遇到的問題，其實就在HTML語法設定上的先後順序，主要是那兩個球，我把它變成兩個方塊，塞在左上右下，便會使用到絕對定位(absolute)，但我剛開始還搞不清楚怎麼跟老師一樣定位。
後來我才明白，上方階層的HTML的NAMECARD，需要包覆住兩個藍色方框，上方定義position為relative，下方方框定義為absolute，才能針對NARDCARD做絕對定位，而另外還有一個詭異的事情，就是overflow。
在使用overflow屬性之後，多餘的會被切割掉，隱藏overflow之後，藍色方框就會出現，如下圖所示：
讓我不太解的是，將上方*全部範圍顯示框線之後，藍色方框的位置居然移動了！實作的時候又要重新調整，感覺很麻煩，是哪邊有推擠壓到，掉下來了嗎？有大神可以解嗎哈哈
不過最後還是做出來成品，對新手來說算是學習頗多吧！
仔細一看發現這堂課作業居然有8個作業！第一次遇到作業這麼多的課，但我發現寫程式真的會上癮，尤其是當作不出來自己想要的效果時，會一直思考哪個環節出錯，為何顯示不出來正確的，明白了工程師寫程式這麼投入的原因了！
下份作業是用運先前學會的語法，製作一個 個人簡歷，有各種圖表和版面切割，期待製作出來之後的成品，和屬於自己的成就感耶！敬請期待。
有興趣的朋友，也可以上上課程喔！註冊HAHOW有點數可以直抵價錢喔。
>>課程連結：動畫互動網頁程式入門 (HTML/CSS/JS)
請先 登入 以發表留言。