goTOP
December 5, 2022

修改本網站上PC版面中的CSS

| |
網頁語言 » CSS | 閱覽(1193) | Posted by apao at 08:20
因為重新安裝系統,最近常常增加自己的部落格內容,以防自己忘了許多小細節。也包括了自己工作室的部落格記載著許多年下來的內容也十分多,需要做些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);  /*指定文字顏色*/
}


▼當程式碼更新後(修改後,青色箭頭部分出現了 ▶)
點擊在新視窗中瀏覽此圖片
Facebook twitter LINEk
文章来自: 本站原創
Tags: , , , ,
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我