<![CDATA[A.PAO designSTUDIO BLOG]]>

<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[修改本網站上PC版面中的CSS]]> apao <apao@www.apao.idv.tw> Mon, 05 Dec 2022 00:20:01 +0000 https://blog.apao.idv.tw/post// 因為重新安裝系統，最近常常增加自己的部落格內容，以防自己忘了許多小細節。也包括了自己工作室的部落格記載著許多年下來的內容也十分多，需要做些CSS視覺修改，好分辨在眾多的標題與文章間的視覺修正，好讓閱讀者有較好的視覺引導

▼發現電腦版需要點修正（修改前，青色箭頭部分無 ▶）

▼手機版還算清楚，所以沒有動到手機版的視覺修正

▼使用chrome檢視這行程式碼

▼按F12後，找到這段程式碼，應該是之下的 h4

▼開啟 CSS 並找到這段程式碼

▼找到 h4 在網頁中的位置，並 Chrome 中確認無誤後，就可以在 h4 下方增加一段程式碼

▼於 CSS 中增加並修改的程式碼

.textbox-title h4::before{
  z-index: 99999;  /*提升Layer層，不受到其他設定遮蔽*/
  position: relative; /*將content內的符號做相對位置移動*/
  margin: 0 0 0 -20px; /*向左移動20px*/
  content: "▶";  /*文字符號為 ▶*/
  color: rgba(102,102,102,0.80);  /*指定文字顏色*/
}

▼當程式碼更新後（修改後，青色箭頭部分出現了 ▶）

Tags - 修改 , 網站 , pc , 版面 , css ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] 修改本網站上PC版面中的CSS]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment