小弟平常喜歡聽音樂，台灣音樂串流平台的始祖 KKBOX，從一推出就使用至今，也看到 KKBOX 在台灣的音樂圈越來越具有代表性，並且還有自己的風雲榜演唱會，真是太厲害了！這次就以他們的播放器為範本，來寫一個頁面！

網頁的開頭，一樣從navbar 開始，想刻劃的頁面如下圖。

這次跟上次寫的 navbar 內容不同，元件比較多，
HTML 如下

<div class="navbar">
        <div class="container">
            <div class="logo">
                <span class="title">MusicIsGood</span>
            </div>
            <div class="btn">
                <button class="btn-left"><i class="fas fa-chevron-left"></i></button>
                <button class="btn-right"><i class="fas fa-chevron-right"></i></button>
            </div>
            <div class="search">
                <input type="text" class="search" placeholder="請輸入搜尋內容">
                <button class="search-btn"><i class="fas fa-search"></i></a>
            </div>

            <div class="menu">
                <ul>
                    <li><a href="#" title="會員資料" target="_blank"><i class="fas fa-user"></i></a></li>
                    <li><a href="#" title="設定" target="_blank"><i class="fas fa-cog"></i></a></li>
                    <li><a href="#" title="聯繫我們" target="_blank"><i class="far fa-comment-dots"></i></a></li>
                </ul>
            </div>
        </div>
    </div>

分幾個區塊，有一個 LOGO，上下頁的按鈕，搜尋列，右邊有一些會員資料與設定。

SCSS 如下

@import"fontsize";
@import"reset";
@import"boxsizing";

$lead-color: #00aeff;
這次在開頭做了幾個變數寫在前面，這樣可以節省比較多撰寫程式的時間，也藉由每次的專案累積重複的程式碼，未來套入後避免重工的時間。

.container {
    width: 1024px;
    margin: 0 auto;
}

.navbar {
    height: 50px;
    background: #e0e0e0;

}

.logo {
    display: inline-block;
    line-height: 50px;
    margin-right: 100px;

    .title {
        font-size: 28px;
        color: $lead-color;
        font-weight: bold;
        font-family: arial;
    }

}

.btn {
    display: inline-block;
    padding: 0;
    margin-left: 0;
}

.search {
    display: inline-block;
    position: relative;

    .search {
        font-size: 14px;
        border: 1px solid #333;
        height: 21px;
    }

    .search-btn {
        color: #333;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        border: 1px solid #333;
        height: 21px;
    }

}

.menu {
    display: inline;
    float: right;

    li {
        float: left;
        margin-right: 20px;
        line-height: 50px;

        a {
            color: $lead-color;
        }
    }
}

其他大部分與之前的 navbar 大同小異。
這次比較大的心得：透過 import 的變數載入後，重工的時間變少很多，通常這類的變數是每次編寫程式都一定會用到的，用 SCSS 先整理起來，會增加寫程式碼的效率，頁面也比較乾淨！避免較大的專案或是複雜的內容在修改程式碼會花很大的功夫！

另外這次還在研究為什麼 LOGO 無法跟 搜尋列對齊，還在努力中...

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