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

2005/06/04 |

| 點擊數: 5 / 2362

樂多每篇文章的標題列文字是可以辨識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樣式研讀攻略！ (1則留言, 2005/06/04)
「網頁載入中，請稍候．．．」的簡單作法 (17則留言, 2007/05/02)
用樣式控制Google AdSense廣告顯示的位置 (13則留言, 2007/05/03)
[Site] Blog平台新選擇：Xuite (3則留言, 2005/03/14)
[Xuite] 變更頁首(Banner)的圖片 (修正) (1則留言, 2005/04/09)
[轉貼] Blogging十誡 (3則留言, 2005/02/15)
Xuite網址的正規運算式測試 (1則留言, 2007/04/30)
[創作] 字型工具產生器：動態變更Blog網頁的字型大小 (4則留言, 2007/04/29)
[創作] 個人網頁全都連：Show Yourself Generator V1.0 (0則留言, 2007/04/21)
Xuite 浮光掠影的映像介紹 (0則留言, 2005/03/29)
Xuite再度變身！ (0則留言, 2007/08/31)
[轉貼] 全民擁抱BLOG (0則留言, 2005/05/01)
[Blog] 製作跑馬燈式的最近閱讀書籍清單 (8則留言, 2005/05/31)
[Xuite] 令人混淆的「我的日誌」和「日誌列表」 (0則留言, 2005/06/04)
將版面稍稍做了一點調整 (0則留言, 2005/01/08)

簡睿隨筆