iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
自我挑戰組

網頁學習紀錄系列 第 13

鐵人賽Day13-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!加入 hover 效果!

  • 分享至 

  • xImage
  •  

進入 aside 中間部分的編寫,想要寫成下方畫面
https://ithelp.ithome.com.tw/upload/images/20190916/20119300uK1B0GMEKc.jpg
程式碼滿簡單的,跟前面的程式碼差不多,但這次加入了畫面優化跟效果,

先來看一下 HTML 程式碼

 <ul class="just-listen">
                    <li><a href="#">播放暫存區(20)</a></li>
                    <li><a href="#">播放紀錄</a></li>
                    <div class="line"></div>
                </ul>
                <!-- just-listen end -->

                <h2>我的音樂庫</h2>
                <ul class="my-list">
                    <li><a href="#">周杰倫-同名專輯</a></li>
                    <li><a href="#">周興哲-你好不好</a></li>
                    <li><a href="#">七月半-首張專輯</a></li>
                    <li><a href="#">祭壇音樂-同名專輯</a></li>
                    <li><a href="#">PTX-Hallelujah</a></li>
                    <li><a href="#">Bethel-Raise A Hallelujah</a></li>
                    <li><a href="#">盧廣仲-100種生活</a></li>
                    <li><a href="#">蕭敬騰-王妃</a></li>
                    <li><a href="#">蔡依林-腦公</a></li>
                    <li><a href="#">Greeen-奇蹟</a></li>
                    <li><a href="#">桑田佳祐-明天會是晴天吧?</a></li>
                    <li><a href="#">Good Doctor-原聲帶</a></li>
                    <div class="line"></div>
                </ul>
                <!-- my-list end -->

是不是發現幾乎是複製貼上過來的? 對,就是複製貼上過來,只有清單內容有重新修正過而已,
但有一個地方滿推薦這樣寫,我習慣在每一個段落加上 <!--註解end--!> 讓我自己知道這個段落結束了,
以防未來回來維護的時候找不到程式碼。

為了優化目前清單的樣式,我在 SCSS 加入了 a:hover 的效果,
SCSS 如下

.just-listen {
    margin-top: 20px;

    li {
        line-height: 2;
    }

    a {
        color: $lead-color;

        &:hover {
            background-color: $lead-color;
            color: #fff;
            display: block;
                   }
        }
}

.my-list {
    li {
        line-height: 2;
    }

    a {
        color: $lead-color;
        &:hover {
            background-color: $lead-color;
            color: #fff;
            display: block;
                   }
    }
}

這邊 hover 有設定 display:block,是為了讓滑鼠經過自已的時候可以整條 bar,完整呈現在畫面上,讓畫面的可讀更明確,也讓 hover 效果下的文字呈現白色,讓文字更清楚。

今天的鐵人賽很簡單 :)

附上 codepen
https://codepen.io/hnzxewqw/pen/wvwxObv


上一篇
鐵人賽Day12-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!
下一篇
鐵人賽Day14-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!播放器!
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言