image

 

1075865138180_9218.gif

此處標示紅字的語法,要定位或是更改這些語法在自己樣式裡面的位置,進到自己的CSS路徑是

右上角點自己的頭像image我的部落格後台樣式管理部落格CSS原始碼

搜尋語法的話可以按Ctrl+F搜尋即可~ 

如果梅花所提供的語法尋找名稱你怎麼樣都找不到的話請參考以下文章利用開發人員工具尋找可能的語法位置

【梅花的CSS學習】用「開發人員工具」檢視區塊語法的名稱

1075865138180_9218.gif

 

如果想要自己找圖片替換自己部落格的封面橫幅底圖,相關的語法如下

部落格封面橫幅區塊搜尋的語法是 #banner 或是 #header 

(推薦pngtree註冊每日可免費下載兩張) /建議挑選"橫向圖片"

 

要替換橫幅底圖修改background:url(你的圖片位址);

(圖片請一律上傳到自己的相簿,在自己相簿那張圖片找出語法,該圖的頁面imageimage

 

你複製出來的東西通常長這樣             1591317611-1995515212.png

 

1591317874-797864667.png

我們把紅框處標示的這種.jpg、.png、.gif之類結尾的圖片位址檔複製出來取代你的圖片網址這幾個字

  background:url(你的圖片網址);

 

底圖不夠大可以加上一行 background-size: cover; 強制圖片變成全版

(這個方法如果你的圖片畫質不夠是會失真的,可以自行評估是否要使用)

 

如果你放了圖片網址,也確定你的圖明明很高畫質、很高清,但語法用出來結果顯示就是不夠大!(或者畫質很差)

先檢查看看你的圖片網址在.jpg、.png、.gif前面有沒有"_I"、"_1"、"_n"之類的字串,請把它移除

 

上傳到相簿的照片可能會有這些結尾,分別代表的意思如下(參考出處: 圖片大小迷思)

大 1024 _I
中600 _n
小450 _m
大縮圖 170*170 _q
中縮圖 120*120 _s
小縮圖 90*90 _t

 

 

 

 

 

 

 

de75dfd240e76913fd4d393b4930d11f.gif如果你想要放的圖片寬度不夠,你想要讓圖片可以"重複"

可以使用這段語法 background-repeat:重複方向的參數;   (參考資料: Wibibi網頁教學百科-背景圖片重複)

參數  
repeat 預設重覆方式,背景圖片依 x 軸與 y 軸重覆呈現。
repeat-x 背景圖片沿 x 軸重覆呈現。
repeat-y 背景圖片沿 y 軸重覆呈現
no-repeat 背景圖片不重覆出現,就是只出現一次。

 

de75dfd240e76913fd4d393b4930d11f.gif如果你放的圖片只是位置錯了而已,你可以加一段語法控制圖片位置

background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;  (參考資料: Wibibi網頁教學百科-背景圖片位置)

參數  
水平方向 left(靠左)、center(置中對齊)、right(靠右)
垂直方向 top(靠上)、center(置中)、bottom(靠下)

 

de75dfd240e76913fd4d393b4930d11f.gif如果你想要人工指定底圖的位置,以下這兩個語法也是梅花很常拿出來try的

margin         文章內文和邊界之間的距離(單位可能是px、em)(1em=16px)

margin-top   上邊界 margin-bottom   下邊界
margin-left   左邊界 margin-right   右邊界

或是直接設定在同一行 margin:上邊界 右邊界 下邊界 左邊界;

06004083.gif

padding       留白的距離

padding-top   上留白 padding-bottom   下留白
padding-left   左留白 padding-right   右留白

或是直接設定在同一行 padding:上留白 右留白 下留白 左留白;

06004083.gif

 

de75dfd240e76913fd4d393b4930d11f.gif果你放了圖片,但是發現你的圖太大了,原始的封面框架沒辦法完整顯示出你的首圖

除了上述的小技巧可以去調整之外,在#banner或是#header裡面可以試著去直接調整width(寬度)、height(高度)

 

 

 

梅花的語法筆記

檢視CSS標籤F12 文章區塊 #content
*開發人員工具* *改文章標題字體、背景*
部落格整體 #body *改行距、邊界*
*換背景底圖* 公告版面 #spotlight
*換字體* *公告版面應用*
*換部落格ICON* 實用推薦
*設計LOGO*  *讓部落格可以被Google*
封面橫幅#banner/#header *Google Analytics分析*
*換封面底圖* 其他應用
*部落格標題敘述大小位置* 0074.gif梅花的語法筆記本0074.gif
側欄區塊 #links *文章內的目錄(錨點)image
*改側欄標題的背景* *關閉遮蓋版面的廣告*
*Facebook粉專外掛image *隱藏上方藍色選單*
*音樂外掛image *連結Google相簿*
*YouTube外掛image *圖片瘦身不失真*
*分享連結階層*  
   

 

arrow
arrow
    創作者介紹
    創作者 梅梅 的頭像
    梅梅

    梅花問路

    梅梅 發表在 痞客邦 留言(1) 人氣()