洛奇的個人網站1周年：網站的製作歷程 - 九藏喵窩V5

上傳

點擊文件名下載附件
説實話這個網站當時我基本是邊學邊做，開坑時就會一些皮毛，到了做完時，做好一個一般的現代網站所需要的一些技能我都已經會了。

登錄/註冊後可看大圖

8月11日，網站開坑
(, 下載次數: 30)

上傳

點擊文件名下載附件
就像我在發初版洛奇網站的預告時説的一樣，因爲想讓洛奇的設定往軟件工程師的方向發展，軟件工程師就是程序員，而很多程序員都有自己的網站，我就決定開坑做這個項目。
我拿Krita做出了每次洛奇網站出更新帖都必定會出現的那個圖片，作爲當時洛奇網站的banner。
其實，我本可以直接用我當時學到的知識直接做完洛奇的網站，但是在那時，我也同樣用我當時學到的知識做的自己的主頁。。。長這樣
(, 下載次數: 32)

上傳

點擊文件名下載附件
（其实现在我本家的主页还是如此简陋XD）
我可不希望洛奇的網站如此簡陋，因此我決定為製作洛奇的網站而學習更多的新知識。

登錄/註冊後可看大圖

8月13日-20日，早期網站框架
(, 下載次數: 25)

上傳

點擊文件名下載附件
8月13日
(, 下載次數: 27)

上傳

點擊文件名下載附件
8月16日早
(, 下載次數: 31)

上傳

點擊文件名下載附件
8月16日晚
(, 下載次數: 27)

上傳

點擊文件名下載附件
8月20日早
這段時間裏，我學會了使用flexbox，有了這個，我可以很輕鬆讓地讓html中的一個或者一組物件出現在另一個物件的水平位置，并且掌握了更多的css技巧。我利用這些技巧做出了更加精美的網站框架。有了這些，此時的網站已經很像那麽一回事了，我當時預期的網站最終成品也是以這個框架為基礎的。
然而在開始考慮移動端時，出現了問題。。。
我當時對於響應式設計基本一竅不通，只有用flexbox的wrap屬性寫出一個類似的東西出來，這樣做出來的效果很不完美，我當時絞盡腦汁也沒能想出究竟該如何才能寫出完美的響應式架構，於是又撩置了幾天。
秀樹曾經告訴我說用Bootstrap可以實現很多炫酷的效果，於是我就這樣一直用Mimo學到bootstrap（現在的Mimo似乎沒有這一章節了）。。。

登錄/註冊後可看大圖

8月25日-27日，新的框架
我終於學到了bootstrap部分，然而Mimo的Bootstrap教程並沒有教我如何解決響應式的問題，但既然已經學到了這些bootstrap相關的知識，我覺得我應該可以直接用去網上找個模板糊弄完事。最後，我找到了這個看起來不錯的模板：
(, 下載次數: 27)

上傳

點擊文件名下載附件
它有一個看起來不錯的側邊導航欄，到了移動端又會自動轉化成在頂部的下拉導航欄，我感覺這樣的導航欄對於當時的洛奇網站來説很適合，我決定直接”藉鑒“這個導航欄，其餘的架構我自己來。
bootstrap幾乎就是一些css類名而已，想必應該完全通用吧（確信）
但是我當時根本就沒想到會有修改bootstrap文件的情況。。。
當我信心十足的在bootstrap官網下載好完整的bootstrap包，導入到網頁，然後把導航欄的html代碼直接複製到洛奇網站裏，修改一下再用時，我傻眼了。。。
(, 下載次數: 27)

上傳

點擊文件名下載附件
這完全不是我想要的效果啊喂！
折騰了好久，我才發現之所以會這樣是因爲那個模板裏的bootstrap是被改動過的！我也基本沒法判斷是哪裏被改了

。。。
後來我嘗試同時使用模板裏的和原裝的bootstrap，之後嘗試修改網站内容，結果變得更奇怪了。
(, 下載次數: 30)

上傳

點擊文件名下載附件
終於，我決定在網上查找有無在bootstrap實現左側導航欄的方式，隨後找到了github上的一個可以改變bootstrap導航欄位置的項目。
(, 下載次數: 25)