會持續的更新...
如果有我沒有標示到的標籤,可以留言詢問或是提醒我喔~ 謝謝~
# | . | 屬性 | 備註及參照 |
整個頁面的整體設定(調整教學請點我) | |||
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外掛* | *圖片瘦身不失真* |
*分享連結階層* | |
文章標籤
全站熱搜
留言列表