今天來更換主頁文章的分隔線
▼ 首先點開部落格主頁，按下F12叫出開發人員工具。
▼ 點選檢查元素後對準分隔線按下左鍵。
▼ 確認旁邊小視窗中#spotlight,.article {background: url("....")}，會因為套版關係而長的不同，但可以就以有background: url("....")為判別，點選右上角連結normal.css?......
▼ 就會進入到開發人員工具後台設定的css中
我們就可以看到全串的css大概長這樣
background→代表背景。
url()→代表圖片連結。
left bottom repeat-x靠左靠底部對齊並在X軸上平鋪Y 軸不會重複。
所以我們可以知道分隔線大概主成為
#spotlight,.article {
background: url("圖片連結"
)left bottom repeat-x
}
▼ 所以我們可以直接到痞客邦後台css中做更動，或是在開發人員工具css頁先做嘗試更動直接先將照片連結貼上在"..."中。
▼ 會發現圖片好像無法適配，那我們就必須再添加調整大小的css，你可以先將background-size: 480px 25px;貼上在left bottom repeat-x的後頭，在逐步調整到你覺得舒適的大小。
▼ 在將調整好的css複製下來貼到痞客邦後台，最快的方式就是直接Ctrl+A(全選)然後Ctrl+C(複製)跳到痞客邦後台再Ctrl+V(貼上)。
這樣就完成修改，還有一些特別可以調整的，例如上下邊距、左右邊距、圖片等比例放大等等的設定方式就不細說了，大家如果有其他問題歡迎在底下留言。
打造屬於自己的痞客邦 - 維特學習筆記 - 目前瀏覽 Ep.6
1. 學習筆記前文 - Ep.0
2. 痞客邦 HTML 和 CSS 完全指南 - Ep.1
3. 在側欄、文章中插入FB粉絲團 - Ep.2
4. 頁尾樣式修改 - Ep.3
5. 移除文章底部熱搜、猜你喜歡小廣告 – Ep.4
6. 移除、修改閒置廣告樣式 – Ep.5
遊戲攻略 (6)