會持續的更新...
如果有我沒有標示到的標籤，可以留言詢問或是提醒我喔~ 謝謝~
| # | . | 屬性 | 備註及參照 |
| 整個頁面的整體設定(調整教學請點我) | |||
| body | 部落格的整體版面 | ||
| a | 所有的超連結 | ||
| a:hover | 滑鼠移到超連結上面時 | ||
| 封面/刊頭/橫幅區塊(banner或是header)(調整教學請點我) | |||
| #banner | 封面橫幅 | ||
| #banner h1 | 部落格名稱/標題 | ||
| #banner h1 a:hover | 部落格名稱/標題的超連結 | ||
| #banner h2 | 部落格敘述(描述)的地方 | ||
| 文章區+側欄區 | |||
| #container | 文章區+側欄區的設定(整體內容區塊) | ||
| 側欄區塊 | |||
| #links | 整個側欄區塊 | ||
| .box-title | 側欄標題 | ||
| .box-text | 側欄內容 | ||
| .box-text a | 側欄內容的超連結 | ||
| .box-text a:hover | 滑鼠移到側欄內容的連結時 | ||
| .inner-box ul | "我的連結"裡分享的連結 |
.inner-box ul :before .inner-box ul :after |
|
| .box-more | 應該是每一個側欄的小區塊裡面的內容吧(?) | ||
| .box-more a | 承上的連結 | ||
| .box-more a:hover | 承上上樓滑鼠移過去連結上 | ||
| 文章區塊 | |||
| #content | 文章區塊整體 | ||
| .article | |||
| .article-head | 文章標題+發表時間 | ||
| .publish | 發表時間 |
.date日期 .month月份 .day星期幾 .year年份 |
|
| .title | 文章標題(不含時間的區塊) | ||
| .title a | 文章標題(不含時間的區塊)的連結 | ||
| .title h2 a | 文章標題 | ||
| .article-body | 文章的內容區塊 | ||
| #content | .recommended-posts3 | 【你可能會有興趣的文章】的標題和連結框框們全部 | (最左兩格要一起寫才會生效) |
| .article-keyword, .article-keyword a | 【文章標籤】以及所有的標籤連結 | ||
| .refer,.history | 【文章分類】和【歷史上的今天】 | ||
| .back-to-top | 回到最上層 | ||
| .back-to-top a | 回到最上層超連結 | ||
| .title h2 img | 文章標題前的密碼圖示、隱藏圖示 | ||
| #article-main | .article-content-inner | 文章區塊內容的部分 | (最左兩格要一起寫才會生效) |
| 創作者介紹區塊(調整教學請點我) | |||
| .author-profile__header | 【創作者介紹】這五個字 | ||
| .author-profile__main | 整個【創作者介紹】的框框 | ||
| .author-profile__info | 部落格名稱 | ||
| .author-profile__avatar | 作者的照片 | ||
| 訪客留言/留下迴響的區塊 | |||
| #container #main #content #user-post #comment-box | .comment-textarea textarea | 訪客留下迴響的框框，以及訪客留言時看到顯示的字體跟大小 | (最左兩格要一起寫才會生效) |
| #container #main #content #user-post #comment-box | .captcha input | 輸入驗證碼的那個框 | (最左兩格要一起寫才會生效) |
| #container #main #content #user-post #comment-box #comment-area | .comment-body a | 【看不懂換張圖】的字體大小、顏色設定 | (最左兩格要一起寫才會生效) |
| #container #main #content #user-post #comment-box | .comment-extra | 【其他選項】、【表情符號】、【送出留言】的背景 | (最左兩格要一起寫才會生效) |
| 公告版位(調整教學請點我) | |||
| #spotlight | 公告版位區塊整體 | ||
| #spotlight h5 | 公告版位的標題 | ||
| #spotlight-text | 公告版位的內容 | ||
| 頁尾描述 | |||
| #footer | 頁尾描述區塊 | ||
| #bottom ,.bottom-skiplink ,.bottom-pixnet | 頁尾描述區塊裡面，痞客邦官方的一些超連結 |
超連結裡面包含：回到首頁、回到主文、 免費註冊、客服中心、痞客邦首頁 ，以及2003-2020PIXNET字樣 |
|
| 誰來我家 | |||
| #visitor.box | 誰來我家區塊 | ||
| .li a img | 訪客頭像 | ||
| 痞客邦置頂的藍色橫條(調整教學請點我) | |||
|
.pixnavbar__top-bar__logo .pixnavbar-d__navbar .pixnavbar__top-bar__logo |
痞客幫LOGO本人 |
||
| .pixnavbar-d__navbar .pixnavbar__top-bar__pix-blog | 部落格字樣 |
||
| .pixnavbar-d__navbar .pixnavbar__top-bar__pix-streamtopic | 邦邦字樣 |
||
如果我的筆記對您有幫助，記得幫我按個火箭推推、留言~
我有參考許多篇文章，但是最終是自己慢慢KEY慢慢找出來的
如果您需要引用，請留言告知，並且註明語法出處及附上連結
筆記會不斷的更新，請尊重原創者的辛勞，不要全部COPY偷走喔!
梅花的語法筆記
| 檢視CSS標籤F12 | 文章區塊 #content |
| ＊開發人員工具＊ | ＊改文章標題字體、背景＊ |
| 部落格整體 #body | ＊改行距、邊界＊ ⛔ |
| ＊換背景底圖＊ | 公告版面 #spotlight |
| ＊換字體＊ | ＊公告版面應用＊ |
| ＊換部落格ICON＊ | 實用推薦 |
| ＊設計LOGO＊ | ＊讓部落格可以被Google＊ |
| 封面橫幅#banner/#header | ＊Google Analytics分析＊ |
| ＊換封面底圖＊ | 其他應用 |
| ＊部落格標題敘述大小位置＊ | ＊ 梅花的語法筆記本＊ |
| 側欄區塊 #links | ＊文章內的目錄(錨點) ＊ |
| ＊改側欄標題的背景＊ | ＊關閉遮蓋版面的廣告＊ |
＊Facebook粉專外掛 ＊ |
＊隱藏上方藍色選單＊ |
＊音樂外掛 ＊ |
＊連結Google相簿＊ |
＊YouTube外掛 ＊ |
＊圖片瘦身不失真＊ |
| ＊分享連結階層＊ | |
請先 登入 以發表留言。