我準備ㄌ兩張圖片如下:
請先進入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 ; ←距離右邊間距請自行修改
}
留言列表