Hello! 👋

哈囉，我是Yun
這裡是我的個人部落格，用文字紀錄生活

學習筆記-使用CSS變更HTML標籤特性

CSS Reset 清空瀏覽器預設樣式如果只有寫 html，則瀏覽器會有預設的 CSS 樣式帶入在 Google 上搜尋 CSS reset 點以下連結可以查詢到 CSS reset Code 將這個網頁裡的 code 貼入自己的 style.css 就可以 reset 預設樣式貼完之後再寫自己的 CSS code，則下方的 CSS 權重會大於上方，所以會以自己寫的 CSS 為最後呈現 BLOCK 區塊元素區塊元素特性: 盡可能的占滿版面區塊元素會另起一行進行呈現如上圖，a 標籤沒有占滿版面，也沒有另起一行呈現，所以不是區塊元素從 Computed 中可以看到是 Auto x Auto INLINE 行內元素行內元素特性: 比較常用在段落沒辦法設定寬高 SPAN SPAN 本身沒什麼意思，是用來點綴排版用的行內標籤寫法例如: <p><span>今天</span> 天氣真好</p> 或是使用 class 寫法 <p><span class="red">今天</span> 天氣真好</p> .red { color: red; } 想要讓行內元素變成區塊元素的話，需要在 CSS 中加入 display:block...

Hugo文章加密方式

如果將 Hugo 文章加密? Step1 修改 Single.html 在 layouts/_default/single.html 中找到{{- if .Content }}段落，將段落改成以下 code {{- if .Content }} <div class="post-content"> {{ if .Params.password }} <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> <div id="protected"> <input type="password" id="postPassword" placeholder="輸入密碼" /> <button id="unlockBtn">解鎖</button> </div> <div id="postContent" style="display:none; margin-top:1rem;"></div> <script> const secret = "{{ .Params.password }}"; // ✅ 保留 HTML 標籤 const plaintext = {{ .Content | jsonify | safeJS }}; const ciphertext = CryptoJS.AES.encrypt(plaintext, secret).toString(); document.getElementById("unlockBtn").addEventListener("click", function () { const pwd = document....

憂鬱

🔒 文章已加密，請點擊標題輸入密碼閱讀全文。

退休計畫 no.1

我的退休計畫：有自己的朋友跟社交圈有自己的事業(並非只是工作) 財務狀況穩定，有自己的退休計畫有自己的房子每個月有五萬被動收入以 5%殖利率來算就是有 1200 萬的股市資金投入育兒基金 400 萬有興趣愛好其實一直想在中晚年開一間自己的小店，悠閒地泡咖啡服務客人，但覺得這個願景實在太過遙遠，所以暫時不納入退休計畫裡。

滑鼠使用心得

本篇記錄我使用滑鼠的心得，希望有天可以找到那個非它不用的真命滑鼠。羅技 M650 喜歡：靜音滑鼠，顏色好看不喜歡：好小，大手不友善羅技 M720 喜歡：尺寸中型手很合適，黑色白底造型好看不喜歡：中間滾輪沒有卡點，第一次連線時一定要先用別的滑鼠進設定連藍芽

母親節快樂

出遊: 木質森林這次安排了兩天一夜的放鬆行程，周六中午先是睡到自然醒，十點才緩慢出發前往台中麗寶 outlet，隨意在美食街吃完午餐後，去了一樓的木質森林入場。一歲半的小朋友在裡面可以自己玩的設施不多，但這次有我媽帶著，所以女兒玩的很開心。本來以為是要先做手作課程才能開始玩設施，結果沒想到課程是完全自主的，進去玩了好一陣子工作人員開始宣傳「手作課程開始囉~ 」沒想到也只有兩人進去手作，而且五分鐘就完成了手作成品。新月梧桐: 非常滿意離開 outlet 後就開車去了三義卓也小屋，但女兒車程只睡了半小時，所以非常疲憊，checkin 以後我們在咖啡廳短暫待了一下，就帶女兒回房午睡。晚餐時間開車去新月梧桐吃晚餐，全家都對菜色覺得很滿意，尤其是我爸媽。卓也小屋: 滿地螞蟻晚餐回房後已經是快九點，女兒也已經很累了，驚悚的地方來了，一打開門滿地都是大螞蟻！目視就大概有 20 隻左右。我跟老公瘋狂採地板，直到聽到女兒大哭才猛然想起，把她抱到床上。我立馬打給客服，房務來看過之後說最近季節關係，這間房型確實會偶發大昆蟲探訪的情況，於是幫我們升級成 VVIP 套房。換到 VVIP 套房後正當我想去廁所大便時，又看到了一隻手掌大小的蜘蛛，移動非常迅速，老公處理掉之後，當天晚上我就夢到全身都是螞蟻爬來爬去的惡夢。母親節快樂幾乎是當了母親後才真正好好安排這個節日，也是藉著節目之名好好撫慰自己操碎的心靈跟身體。但安排了這樣一趟旅程之後反而覺得還更累了。

學習筆記-CSS基礎

標籤選擇器標籤選擇器 { 屬性: 設定值; 屬性: 設定值; } 例如以下 h1 { color: blue; font-size: 50px; } CSS 除錯分析檔案路徑是否正確單字有沒有拼錯格式是否正確在 Chrome 瀏覽器頁面按右鍵»檢查如果 CSS code 當中有寫錯導致無法辨識，在 Element 元素就會出現畫線的錯誤顯示如下: 擬態選擇器 hover 除了標籤選擇器以外還可以使用擬態選擇器，使用情境： a 標籤文字設定成黑色，但希望當滑鼠滑過去時文字可以變成紅色這樣可以寫成這樣 a { color: black; } a:hover { color: red; } /*讓滑鼠按下時變成blue的話可以用active*/ a:active { color: red; } 類別選擇器如果有好幾個 P 段落，但其中某一個段落想要使用客製化 CSS file INDEX.HTML 設定如下 <p>段落一</p> <p>段落二</p> <p class="style1">段落三</p> <p>段落四</p> STYLE.CSS 增加如下 code .style1 { color: red; } class 屬性也同樣可以應用在 a 或是 li 上面...

學習筆記-HTML基礎

Emmet 載入在 VSC 或是 Codepen 要載入 Emmet 套件，可以直接打"!"+“Tab"鍵，就會立馬出現以下 Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> #如果沒有加這行在IE瀏覽器會出現亂碼 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #針對手機、Ipad做螢幕解析度調整 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> #讓IE更新到最新版本 <title>Document</title> </head> <body></body> </html> 按"P*2"就會自動載入下方 code，如果*3 就會一次出現三個 <p></p> <p></p> 列表標籤呈現效果會是: ● 項目一 ● 項目二 ● 項目三 1.項目一 2.項目二 3.項目三 <ul> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> <ol> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ol> li 可以用來包 a 連結也可以用來包 img 圖片

走什麼霉運

衰週日早上 9 點多等老公醒來以後便把女兒託嬰給他，帶著昨天晚上買的三顆蘋果跟三顆柳橙，去到巷角的土地公廟拜拜。最近覺得太多不順遂的事情，先是跟老公因為家庭分工大吵一架，工作上也是出現各式各樣的小失誤，隨後又在抱女兒的時候被她不小心劃傷眼睛，眼角膜被扯下一塊。沒錯，就是眼角膜被扯下一塊，被刺到時整整十分鐘痛到說不出話來。跟土地公說希望我的眼睛可以快點好，工作順利些，最後也祈求全家平安健康。書最近在看《納瓦爾寶典》，裡面提到有個觀點令我很印象深刻，就是關於零和遊戲以及正和遊戲，我在想，在工作上爭取升遷是不是一種零和遊戲? 作者說明追求財富增長是一種正和遊戲，也就是正確的追求財富方式，是將錢投入事業中並且用錢賺錢，這也是我接下來需要好好努力的方向。書中說得好幾個觀點都很值得細品，另外還有關於財富的定義就是自由，也就是說，投注時間所換取的財富其實不是好的財富，這點也很值得反思展開深度規劃。整理最近在讓自己刻意喜歡整理這件事，真的好不容易。為什麼有些人天生就喜歡整理? 我努力嘗試將櫃子清空或是排整齊，發現真的有一絲神清氣爽的感覺，但那感覺大概就維持一秒吧，我知道很快這片區域可能又會被灰塵蒙上一筆灰，乾淨和多巴胺一樣都是很短暫的。