iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 21
0
自我挑戰組

網頁學習紀錄系列 第 21

鐵人賽 Day21 向 KKBOX致敬-在 footer 中使用 position 固定在底部

終於又來到了這個網頁的尾聲,用 footer 來結尾,想要呈現的樣式如下:
https://ithelp.ithome.com.tw/upload/images/20190924/20119300mf0pqmJ6xP.png

footer 的內容不用太多,但目標要明確,比如在 header 沒有呈現的補充資訊,
個人不太喜歡 header 跟 footer 有重複的資訊,比較希望有分工的概念,
這樣也可以幫助使用者不用一下子接收到太多的資訊,會有選擇障礙,使用上也不便利!!

HTML 如下

<div class="footer">
        <div class="container">
            <p class="footer-text">Copyright © 2019 MusicIsLife All Rights Reserved.</p>
            <ul class="footer-menu">
                <li><a href="#"><i class="fas fa-globe-americas"></i></a></li>
                <li><a href="#"><i class="fab fa-facebook"></i></a></li>
                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                <div class="clearfix"></div>
            </ul>
        </div>
    </div>

沒有太多特別的地方,滿好理解的。

scss 如下

.footer {
    border-top: 3px solid $lead-color;
    height: 50px;
    background: #e0e0e0;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
這邊為了讓 footer 固定在下方,所以使用了 position,左右撐開,固定於下方。
    .footer-text {
        float: left;
        color: #333;
        font-size: 18xp;
        line-height: 50px;
    }

    .footer-menu {
        float: right;
        line-height: 50px;

        li {
            float: left;

            .fa-globe-americas,
            .fa-facebook,
            .fa-instagram,
            .fa-twitter {
                color: $lead-color;
                font-size: 18px;
                margin-right: 1em;
            }
        }


    }

}

其他沒有太多特別的地方,
codepen https://codepen.io/hnzxewqw/pen/wvwNyEK


上一篇
鐵人賽 Day20 向 KKBOX致敬-嵌入 youtube 連結
下一篇
鐵人賽 Day22 人員卡片介紹頁面-Amos 老師的教學筆記
系列文
網頁學習紀錄30

尚未有邦友留言

立即登入留言