Day 71 (Week10), 2021/06/21 (Monday)

學習時數:9 hr

Done

  • [x]   w11 hw2 部落格 index 切版 95%
  • [x]   w11 hw2 部落格 login 切版 30%

To Do @ this week

  • [ ]   w11 hw1 留言板
  • [ ]   w11 hw2 部落格

學習心得紀錄

Objective 客觀

Blog 主頁切版

今天想了很久要弄什麼樣式的部落格,參考了很多設計師的外國網頁,發現真的是太厲害了QQ,後來就參考了餐廳網頁的設計、其他的部落格設計樣式,想了很久要怎麼切各個區塊,還有區分管理員頁面以及一般頁面,其實還在思考「後台管理」這個按鈕要放在哪一個地方。在調整 icon 粉色系跟 社群的 icon,也花了一些時間。
在文章列表的部分,排列的樣式都是小細節需要注意,例如分隔線,為了以後方便增加新的文章,所以在思考分隔線要怎麼放,才可以每次順利新增文章與分隔線,其實我一開始沒有想到「新增」文章時要放上分隔線,所以後來思考到「新增」的功能時,也要一起新增分隔線,而且也要考慮到第一篇文章與最後一篇文章的分隔線位置,總不能第一篇文章的 margin-top 也有分隔線吧,那就不太美觀了!
所以後來我想到的方法是在 JavaScript 新增文章的同時,在新文章前面新增分隔線,這樣就不會有分隔線出現在錯誤位置的狀況。

Blog Login 切版

其實我在 div 水平置中的方法還不太熟悉,有時候在 dev tool 嘗試失敗,都還是要 google 一下,應該是父元素、子元素之間的關係不太熟。

感受

好像花有點多時間在切版QQ,但是就有莫名的執著,想要刻出想像中的部落格。

Decisional 決定行動

明天繼續努力!
這次的部落格作業,有登入機制、新增文章、刪除文章,其實有點類似留言板的功能耶!看起來滿像是複習上週的留言板功能實作。

#css #html







你可能感興趣的文章

優化程式碼

優化程式碼

JavaScript 核心 - this 到底是誰

JavaScript 核心 - this 到底是誰

為你的 Github 首頁加上酷酷的貪吃蛇動畫

為你的 Github 首頁加上酷酷的貪吃蛇動畫






留言討論