iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

網頁學習紀錄系列 第 12

鐵人賽Day12-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!

  • 分享至 

  • xImage
  •  

這次要寫一個播放器的清單,在編寫之前,我先把 navbar 優化了一下,如下圖呈現的樣式,
https://ithelp.ithome.com.tw/upload/images/20190915/201193000OKucOa9Up.jpg
但我還是沒有研究出來 search 要怎麼對齊在 navbar 的中間,如果有大大知道,還請多指教!
navbar 優化就不再這邊贅述,不過這邊有用一個小技巧,就是 position:fixed,想知道原理可以看 W3school 說明,為了讓之後使用播放器頁面時,可以隨時使用 navbar 的功能,就不用一直拖曳頁面喔!!

回歸正題,這次要寫的 aside 側邊欄位,總共會分為上中下層來編寫,
最上面是基本功能,中間會是收藏的歌曲或專輯清單,最下面則是現在正在播放的曲子

這次我們就先來寫最上面的 aside 的基本功能區塊吧!
要呈現的樣式如下
https://ithelp.ithome.com.tw/upload/images/20190915/20119300Sd4xe1FTR9.jpg

HTML如下

 <div class="content">
        <div class="container">
            <div class="container-left">
                <h2>線上聽</h2>
                <ul class="member-menu">
                    <li><a href="#"><i class="fab fa-searchengin"></i>發現朋友</a></li>
                    <li><a href="#"><i class="far fa-play-circle"></i>糾來一起聽</a></li>
                    <li><a href="#"><i class="fas fa-tv"></i>頻道</a></li>
                    <li><a href="#"><i class="fas fa-broadcast-tower"></i>廣播</a></li>
                    <div class="line"></div>
                    <div class="clearfix"></div>
                </ul>
            </div>
            <div class="container-right"></div>
            這排是到時候右邊頁面內容要使用的區塊
        </div>

HTML 沒有什麼太多特別的設定,也就是基本的 ul li 而已。

再來看一下 SCSS,

.content {
    padding-top: 70px;
    line-height: 1.5;
}
因為 navbar 有設定 position:fixed,所以 content 內容要使用 padding-top 向上推擠,才能夠避開 navbar
h2 {
    font-size: $font-l;
    font-family: 微軟正黑體;
    font-weight: bold;
    color: #6d6d6d;

}

.line {
    border-bottom: 1px solid #333;
    margin-top: 30px;
}

.member-menu {
    margin-top: 10px;
    .fa-searchengin,
    .fa-play-circle,    
    .fa-tv,
    .fa-broadcast-tower {
        left: 30px ;
        padding-right: 10px;
    }
    a{
        color:$lead-color;
    }
這邊有發現跟前面不一樣嗎? 因為我這邊並沒有要讓 ul li 併排,所以沒有寫 float:left,他就會呈現 display:block,占滿空間,就會變成這樣呈現喔!!
}

這裡面有些屬性前面有錢字號($),這是預先寫好的變數,可以讓管理 CSS,也可加速寫網頁的速度喔!!
附上 codepen
https://codepen.io/hnzxewqw/pen/rNBrYae


上一篇
鐵人賽Day11- 向 KKBOX 致敬,一樣從 navbar 開始
下一篇
鐵人賽Day13-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!加入 hover 效果!
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言