hexo 有部署沒顯示問題
狀況問題如下：我的其中一篇”Selector Combinators 中的+跟~差別”，已經部署上去的文章，明明已經成功部署了，但是點進去看時會出現這個畫面 剛看到時毫無頭緒，後來思考了幾種拯救的方式來試試看能不能救回來 重新做部署的動作12hexo g // 建立靜態頁面hexo d // 部署到github 還是沒辦法 修改 code那我在想有可能是因為 code 的部分有寫錯的問題，仔細檢查了程式碼之後的確有不尋常的地方 試試看把標題裡那個有藍色波浪號拿到後，是不是就正常了 也不是這個問題，排除 結論經過多次的比對之後，發現了原因source 裡 posts 文件的命名中我有使用到～及＋看來名稱的使用上要注意一些符號雖然本地端預覽使用 hexo server 看都沒問題，不過推到遠端就會發生 404 最後改過後就又恢復正常了～
grid的不同解讀
繼 css flex 佈局出來之後，後來又出現了 css grid 的佈局方式，不過 grid 這個詞不是被新發明出來的，是之前就有的東西。 假如你想跟別人討論說要使用 grid，但沒講清楚是哪種「grid」的話，可能溝通上就會造成許多問題，這篇會提到有三種解讀方式： 格線系統(grid system)的 grid一種 ui 設計會使用到的概念，可以幫助設計師更好的在畫面上安排，另外前端框架 Bootstrap 也會使用到 grid system，這邊要注意到並不是指 css 裡面的那個 grid css 佈局方式的 grid屬於 css 裡面的佈局方式，使用時 display 會先變成 grid，如： 1display:grid 使用之後，這個使用的區塊元素就都會變成「grid」，只需再搭配一堆 grid 系列的語法，就能利用 gird 讓網頁排成自己想要的形狀～ 簡寫屬性的 grid剛剛上面提到，把區塊設成「grid」物件後，就能利用一堆的 gird 系列語法來完成佈局，這邊提到的簡寫屬性的 grid 就是它裡面的其中一種寫法，如： 123grid: auto-flow /...
切版中的學習書單
現在練習切版中，這些是我現在正在看跟準備看完的書，做個整理。 金魚都能懂的 CSS 選取器https://www.books.com.tw/products/0010863222 從自學到成功轉職軟體工程師：自主學習讓我重拾人生的發球權https://www.books.com.tw/products/0010914782 為你自己學 githttps://www.tenlong.com.tw/products/9789864342662?utm_source=gitbook&utm_medium=site Github 創辦人親自指導你精通 Githttps://www.books.com.tw/products/0010813105
css position 學習心得
原文連結: https://appcs342.blogspot.com/2022/04/css-position.html移植時的最後更新日期: 2022-04-08T21:36:10.985-07:00 最近有在研究position，在css中這算是一個非常重要的屬性，網頁中的定位全要靠它，在此整理一些研究時的筆記跟我的小小心得～首先，是我對position作用的理解對網頁上物件的屬性添加了position就可以改變物件的排列方式，改變其在網頁上位置，但其實就算都沒有添加，原本物件間也會有自己的排列，所以我會覺得說，position它其實是在對網頁上的物件做一個「改變定位參考對象」的動作，預設狀態下參考對象會是原本物件資料自己本身的排列狀態，position的值會改變定位參考對象，從而改變物件排列方式。position主要有的值大致分成以下五種：staticrelativefixedabsolutestickystatic這個值是假如都沒設position，預設就會是satic。幾個我覺得重要的點使用了這個值，其他的定位方式都會失效很少用到，因為預設就是static...
Selector Combinators 中的+跟~差別
原文連結: https://appcs342.blogspot.com/2022/04/selector-combinators.html移植時的最後更新日期: 2022-04-04T05:40:13.467-07:00 介紹兩個很類似的選擇器，全名是Next-sibling combinator，簡稱加號(+)全名是Subsequent-sibling combinator，簡稱波浪號(~)加號是會影響到後方同層級的首次遇到元素波浪號則是影響後方同層級的全部元素加號跟波浪號都是目標為要影響後方同層級，語法使用方式也都差不多[選取對象A + 選取對象B] 及 [選取對象A ~ 選取對象B]。看起來非常的像，不過有一些差別：加號是只能選到A後面那一個B波浪號是選到A後面整串同層的B
搞懂 width / max-width / min-width 差異
原文連結: https://appcs342.blogspot.com/2022/03/width-max-width-min-width.html移植時的最後更新日期: 2022-03-27T01:59:21.653-07:00 原本自己以為是很簡單的觀念，不過最近被問後發現其實並沒有很了解，像是我沒去思考過假如width跟max-width都設定數值，互相衝突後會發生什麼事情。所以我打算重新研究後，整理筆記出來。width(寬度）用來設定物件的寬網頁頁面一定會用到的屬性max-width(最大寬度值）用來給物件設定最大寬度值適用於尺寸限制時min-width(最小寬度值）用來給物件設定最小寬度值適用於尺寸限制時衝突時的狀況結論：會以更加明確的那個狀況為優先。舉例來說，假如給一個物件10單位的寬度（width)，又指定給這個物件最小寬度為20單位(min-width)，這時候就會產生衝突的狀況。最後的結果會是最小寬度更為優先，所以是20單位。在這狀況下，min-width會覆蓋width的值，我自己是理解成min-width意味著最少就是需要這樣的寬度值，所以假如width設...
css中的img及background-image比較
原文連結: https://appcs342.blogspot.com/2022/03/img-background-image.html移植時的最後更新日期: 2022-03-26T01:01:42.352-07:00 一個是html標籤的img，一個是css的background-image，兩個都能讓網頁中顯示出圖片。我自己目前個人遇到的狀況會使用img > background-image 。img:會使用img的情況通常是：網頁不只是需要單純的一張圖片而已，還需要像是超連結的功能，或是想讓圖片能夠縮小放大。有需要使用動畫的時候，因為img的動畫表現會比background-image更好。影印頁面時，圖片也想跟著被印出來。 background-image:簡單來說，是像是網頁中當背景圖片的感覺，意味著background-image其實並沒有自己本身的意義存在，它沒有辦法去代表網頁中內容的任何事情。會使用的狀況：圖片不是內容的一部分（設計考量）。網頁需要有圖片當背景。影印頁面時，圖片不想跟著被印出來。小結：img是屬於頁面內容的一部分，它是擁有含義的圖...