【小屋】CSS自訂版面：進階─（補充教學）右下選單樣式篇

本文引用自此

前言：
　　‧請先看過啻異（u4）大大的右下標題教學，就是本文上方「引用連結」的原文。
　　‧原本是要貼最後一部分自訂版面的教學，可是不小心就玩起了右下選單……（別打我，躲）

　　起初我在第一篇進階教學中，有講到項目符號自訂樣式的語法，但是，在我使用不同電腦瀏覽小屋時才發現大不妙，原來在ｂｏｄｙ中設定項目符號的樣式只會遮蓋而不是取代，經過瀏覽啻異大大的教學後，東加西減的總算搞定我的右邊文章連結列表（開心的灑小花）。
　　在看接下來的教學前，請先搞懂基本的設定方式唷，所以請務必瀏覽啻異大大的教學！

　　好了，假設您已經瀏覽過啻異大大的教學，也知道初步的設定方式，那麼請接下來增加以下的設定，就能夠像我家一樣讓項目符號隨著滑鼠移上而顯示不同唷。
　　本語法符合W3C的要求，所以應該在任何瀏覽器皆可正常使用。這次的教學語法基礎同樣源至OECSPACE，連結是該網站介紹ＣＳＳ與Ｗ３Ｃ關係的頁面。


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
/*右下的表單標籤list格式*/
.post_list{
background:none; /*設定背景，取消綠色圓點*/
margin: 0px; /*內文與邊界距離，沒有設定的話，列表前會有不明所以的空白*/
padding: 0px; /*邊框空白寬度，沒有設定的話，列表前會有不明所以的空白*/
}
/*標籤基本*/
.post_list ul{
list-style-type: none; /*無設定標籤*/
margin: 0px; /*內文與邊界距離*/
padding: 0px; /*邊框空白寬度*/
}
/*標籤有連結*/
.post_list a{
color:#c97586; /*文字顏色*/
border-bottom: #ccc 1px solid; /*文字有底線*/
width: 100%; /*寬度一定要設定100%，讓它讀取巴哈預設的寬，不然整個選單會移位*/
background: url(http://圖一) no-repeat left center;
padding-left: 20px; /*與左邊框空白距離*/
display: block;
}
/*滑鼠移入標籤*/
.post_list a:hover{
background: url(http://圖二) no-repeat left center;
color:#c97586; /*文字顏色*/
}

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
　　這樣看下來好像只是設定連結的背景圖罷了，害我想得那麼複雜（囧）
　　慢慢來吧ＸＤ～喜歡的話，你家的連結都可以這樣玩唷！

　　好了，文都看完了，快去向啻異大大表達無盡的感激之情啊──（奔）