iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 11
0
自我挑戰組

網頁學習紀錄系列 第 11

鐵人賽Day11- 向 KKBOX 致敬,一樣從 navbar 開始

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

網頁的開頭,一樣從navbar 開始,想刻劃的頁面如下圖。
https://ithelp.ithome.com.tw/upload/images/20190914/20119300mYlyWSQCjR.jpg

這次跟上次寫的 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


上一篇
鐵人賽Day10-向 KKBOX 致敬
下一篇
鐵人賽Day12-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!
系列文
網頁學習紀錄30

尚未有邦友留言

立即登入留言