CSS分類文章圖示& 繼續閱讀.more @ ஜ 失調の靈魂ஓ :: 痞客邦 | 痞客邦繼續閱讀
改了半天的CSS雖然還是沒解決版面底圖的問題,所以索性全部重來,當然也參考了chenshin0719大大的文章,不過為了避免又來一次忘記存檔就關閉頁面,我就先把下面的語法寫起來,免的下次又得重來。電腦裡存了一堆,已經搞不清楚哪個是哪個了~_~!!之前沒有習慣附加使用說明真是不好的行為。所以這純粹提醒自己,我的CSS功力還不到語法教學與分享。藍字粗體都是新增的部份。 分類文章圖示:/*--文章分類的分類目錄--*/#category.box-texth6img{display:none;}#category.box-texth6{background-image:url(圖片網址);background-repeat:n...
改了半天的CSS雖然還是沒解決版面底圖的問題,
所以索性全部重來,當然也參考了chenshin0719大大的文章,
不過為了避免又來一次忘記存檔就關閉頁面,
我就先把下面的語法寫起來,免的下次又得重來。
電腦裡存了一堆,已經搞不清楚哪個是哪個了 ~_~!!
之前沒有習慣附加使用說明真是不好的行為。
所以這純粹提醒自己,我的CSS功力還不到語法教學與分享。
藍字粗體都是新增的部份。
分類文章圖示:
/*--文章分類的分類目錄--*/#category .box-text h6 img{display:none;}#category .box-text h6 {background-image:url(圖片網址);background-repeat:no-repeat;background-position:0px; /*設定圖片的位置*/padding-left:0px; /*設定圖片與分類名稱的距離*/ }
/*--文章分類的文章分類名稱--*/#category .box-text li a{padding-left:0px; }
繼續閱讀:
/*--繼續閱讀--*/.more {float:right; margin-right:20px; font-size:0px; } /*--上面這行是設定位置,CSS樣表內沒有 .more{}者 需自行添加--*/
.more a {
font-size:0; /*---前面這兩行用來隱藏原本的"繼續閱讀"字樣--*/ text-indent: -2000px;
display:inline-block; width:75px; height:25px; background:url(圖片網址); background-repeat: no-repeat; /*--這兩行可以結合成 background:url(圖片網址) no-repeat; --*...
取得本站獨家住宿推薦 15%OFF 訂房優惠
[部落格] Blogger 繼續閱讀(read more)
『繼續閱讀』是blogger一個很方便的功能,使用繼續閱讀標籤可以讓文章在首頁時顯示標籤前面的主要部份,將標籤後的文章省略,讓讀者快速閱讀 ...