課前最終作業二

最終作業二

---

Codepen

---

本篇知識點

將上次做好的Shop-item區塊以及其他區域組起來。
其他區塊沒有太特別的部份，但在製作 pagination 正常應該是選取該頁面才會變更型態，如圖。

如果不使用 JS 的話， W3C 上的範例是直接在要選取的標籤上增加 class class="active"，並且 css 單獨去變更樣式。因為懶得再隔外加上 class，就直接使用選取器去改。(順便練習一下選取器)

HTML

  <ul class="pagination-list">
    <li><-></li>
    <li><a href="#">1</a></li> <!-- 就不再另外命名 -->
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><-></li>
</ul>

CSS

 li{
    a{
        display: block;
        height:100%;
        font-size: $font-h3;
        padding: 16px 26px;
        text-decoration:none;
        color: $primary-color;
    }
    &:nth-of-type(2){                       //練習一下選取器
      background-color: $primary-color;
      & a{
        color: $secondary-color;
      }
    }
 }

使用 scss 要很小心跑錯層，一開始 &: 到了 a 標籤一直沒有反應，才發現放錯了標籤。

結論

這個作業主要是在練習中間區域的排版以及 position 父層子層的觀念。本次不需要製作最底下的 footer 區塊，之後有空再看看要不要把他補齊。