iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

網頁學習紀錄系列 第 8

鐵人賽Day8-來寫一個 footer 吧!

  • 分享至 

  • xImage
  •  

終於來到第一個網頁的內容結尾,通常結尾會有一個表尾,我們俗稱 footer,用來做最後的資訊用,但我個人比較喜歡簡單的樣式,所以就來寫一簡單的 footer 吧!!
畫面會如下方:
https://ithelp.ithome.com.tw/upload/images/20190910/2011930013CovlfeJp.png

HTML 會是這樣

 <footer>
        <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>
    </footer>

內容很簡單,就是一排文字加一排 icon,這邊又用到了 ul li,可見這個語法真的很常用也很好用呢!!
icon 也是到 fontawesome 複製的,5.0 以上的版本納入了 Branding,所以不用再上網找圖片跟後製囉!!

CSS 如下

.footer{
   background-color: #333;
   height: 100px;
   margin-top: 20px;
   //因為通常 footer 也跟 navbar 一樣會是固定的尺寸,所以這邊可以大膽的設定高度,為了區隔上方的內容,所以用了 margin-top
  .footer-text{
    float: left;
    font-size: $font-m;
    color: $navbar-color;
    line-height: 100px;
    //針對 footer-text 的文字做設定,讓它 footer 的左邊
  }
  .footer-menu{
    float: right;
    line-height: 100px;
     //讓 footer 裡面的連結圖示靠右對齊
    li{
      float: left;
      margin-right: 1em;
      //這邊的 li 的技巧跟上面選單的技巧一樣,就不再贅述
      a{
        font-size: $font-m;
        color: $navbar-color;
        cursor: pointer;
              }
     //設定 a 連結的內容
    }
  }
}

這樣 footer 就完成啦!!
這樣的呈現就會是一個比較完整的入口網站!
codepen 如連結 https://codepen.io/hnzxewqw/pen/JjPLmGN


上一篇
鐵人賽Day7-來嵌入 map 與 寫一個 form 吧!
下一篇
鐵人賽Day9-體驗不好的 RWD
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言