close



如果要把最新文章的連結做成上圖的效果
該怎麼做呢?其實做法是很簡單的

首先設定文字連結的標籤:
  #boxNewArticle .boxNewArticle1 .side a {
    display:inline-block;   設定連結為區塊
    higth:14px;     設定區塊的高度
    width:180px;     設定區塊的寬度
    font-size:11px;    設定文字的大小
    color: #B7B7B7;    設定文字顏色
    text-decoration: none;   連結不要底線
    }


接著設定滑鼠游標移到連結時的情況
  #boxNewArticle .boxNewArticle1 .side a:hover {
    color: #484848;     重新設定文字顏色
    background:#F2F2F2;   設定背景色
    }

做到這邊就大功告成拉,不過要注意的是:
 區塊要設為 display : inline-block;
 區塊的寬度不可以設的太小,
 和最新文章這區本身的寬度差不多就好了




arrow
arrow
    全站熱搜

    toocrazy 發表在 痞客邦 留言(1) 人氣()