反逆的御宅族( ACG OTAKU OF THE REBELLION)

今天跟大家分享痞客邦語法，如何增加側邊欄位滑鼠移入之變化，順道增加li語法關係，讓整條項目都會呈現變化喔~快來看看吧~ @w@

box-text為調整側欄區塊內容，可以設定font字型大小、文字顏色color、間距padding，和行高line-height。

語法

.box-text {
color: #可自行設定文字顏色;
font-size: 文字大小px;
padding: 間距px;
line-height: 文字行高px;
}

之前我不知道li的好處，在參考歐飛先生的語法之後，才知道li可以將排版變成水平，連同 最新留言 上下都可以分明清楚，感覺還不錯。

語法

.box-text li a{
display:設定為block;
line-height:我設定是155%;
padding-bottom:與下行之間的距離，可以自行設定px;
color: #設定文字顏色色號，其實上面的color可以不用設定; 
}

接著就是滑鼠移入之變化，因為設定li之關係，可以讓整條選項都可以做到變化，不像我之前只有文字區塊有變化而已喔。

語法

.box-text li a:hover{
background-color:設定移入後的背景顏色藍色#58b2dc;
color:純白的字#fff;
transition-duration:移入後變化時間為0.15秒，不要變這麼快 0.15s;
}

以上跟大家快速分享滑鼠移入之hover變化喔，希望大家部落格都可以美美的喔。 持續研究導覽列當中，有結果再跟大家分享。

相關文章推薦

• 【CSS痞客邦語法】04｜實戰增加-facebook-粉絲團
• 【CSS痞客邦語法】05｜實戰改最底頁數樣式