將繼續閱讀文字改成圖片

more01

more02

我準備ㄌ兩張圖片如下:

 

  

請先進入CSS自訂式樣編輯框中找出下方語法中


有紅色字標示標籤對應每一個標籤

將花刮號 { ... }裡面語法

改成下方每個對應標的花括號 {...} 內語法

進CSS自訂式樣步驟請參考

 

/*繼續閱讀文字改成小圖*/
 

/*繼續閱讀區塊設定*/

.more {
float: right;
font-style: italic;
display: block;
width: 圖寬度px;     ←圖片要呈現的寬度請自行修改
height: 圖高度px;    ←圖片要呈現的高度請自行修改
padding-top: 10px;  ←距離上方高度請自行修改
margin-right: 20px ;   ←距離右邊間距請自行修改
}

/*繼續閱讀區塊文字消失呈現圖片設定*/
.more a{
text-indent: -5000px;  ←這裡一定要設讓文字偏移5000px; 將文字隱藏
font-size:0px;             ←這裡文字size一定要設成 0
display: block;
width: 圖寬度px;         ←圖片的寬度請自行修改
height: 圖高度px;        ←圖片的高度請自行修改
padding-top: 10px;         ←距離上方高度請自行修改
background: url(圖片網址) right no-repeat;  ←圖片靠右不重覆
margin-right: 20px ;  ←距離右邊間距請自行修改

}

/*繼續閱讀區塊文字消失超連結時呈現圖片設定*/

.more a:hover{
text-indent: -5000px;   ←這裡一定要設讓文字偏移5000px;將文字隱藏
font-size:0px;         ←這裡文字size一定要設成 0
display: block;
width: 圖寬度px;   ←圖片的寬度請自行修改
height: 圖高度px;   ←圖片的高度請自行修改
padding-top: 10px;  ←距離上方高度請自行修改
background: url(超連結時的圖片網址) right no-repeat;  ←圖片靠右不重覆
margin-right: 20px ;  ←距離右邊間距請自行修改

}
 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 加菲貓 的頭像
    加菲貓

    加菲貓小窩

    加菲貓 發表在 痞客邦 留言(0) 人氣()