[Xuite] 文章標題列樣式的簡單變化

2005/06/04 |

| 點擊數: 1 / 2617

樂多每篇文章的標題列文字是可以辨識HTML碼，因此在標題上就可以做變化，例如：[Database]。可惜的是Xuite會把標題內的HTML的大於小於都轉成＆ｌｔ；、＆ｇｔ；，導致HTML變成普通文字，而非想要呈現的樣貌。

我們只能對標題列的兩個樣式類別做變化：contentTitle(文章標題)與contentTitleBg(文章標題背景色)。

一般的文章標題樣式如下：

.contentTitle {
font-size:18px;
color:Blue;
font-weight:normal;
padding-left:5px;
}

首先我們用background-image加入一個圖示；no-repeat讓圖示出現一次，若不加則會出現多個而填滿整個標題列。圖示和文字之間必須加大間距，否則二者會疊在一起，因此把填充數值加大到25px：

/* 加入 contentTitle */
background-image: url(http://blog.xuite.net/_theme/skin/list/bulletRank.gif);
background-repeat: no-repeat;
padding-left:25px;

再來試著把標題列的背景變成漸層式的呈現。最簡單的方式是放一個漸層的圖檔到背景樣式內，這個圖檔您可以自行用繪圖軟體製作，我用的是600X24大小的尺寸：

/* 加入 contentTitleBg */
background: url(http://b.blog.xuite.net/b3/ac/11893557/blog_10351/txt/327160/327160_6.jpg);

把以上變動都加入Xuite的自訂CSS後，就能做出如同本網誌的文章標題列一樣的樣式了。

[Xuite] 變更有文章日期的日曆樣式 (5則留言, 2005/07/20)
以jQuery增強Xuite的操作介面 (4則留言, 2007/09/14)
Xuite樣式研讀攻略！ (1則留言, 2005/06/04)
[Xuite] 文章分類後面的小圖示代表什麼意義? (5則留言, 2005/03/16)
在Blog裡顯示隨機文章的簡單作法 (3則留言, 2007/10/14)
「網頁載入中，請稍候．．．」的簡單作法 (17則留言, 2007/05/02)
[Xuite] 如何將文章加入「…more」(繼續閱讀)的方法 (1則留言, 2005/03/16)
Xuite新功能？文章標籤、歷史上的今天與隨機推薦文章 (0則留言, 2008/06/14)
Xuite 功能大躍升!! (1則留言, 2005/03/29)
[創作] 字型工具產生器：動態變更Blog網頁的字型大小 (4則留言, 2007/04/29)
將版面稍稍做了一點調整 (0則留言, 2005/01/08)
[Xuite] 發生異常了…? (1則留言, 2005/08/27)
Xuite再度變身！ (0則留言, 2007/08/31)
用樣式控制Google AdSense廣告顯示的位置 (13則留言, 2007/05/03)
Blogroll的自訂樣式 (0則留言, 2006/05/13)

簡睿隨筆