1. 先來個簡單 HTML，主要是劃出二塊：主內容 和 頁數選擇的btn

  <div class="content">
    <div class="box">123</div>
    <div class="box">123</div>
    <div class="box">123</div>
  </div>
  <div class="page_btn">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

2. 針對上面內容，再上個簡單 CSS：

.content{
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.box{
  width:18%;
  height:100px;
  background-color:pink;
  margin-top:20px;
}
.page_btn{
  display: flex;
  justify-content:center;
}
.page_btn span{
  width:50px;
  border:1px solid;
  margin:10px;
  line-height: 50px;
  text-align: center;
}
.page_btn span:hover {
    background: #444;
    color: #fff;
}

3. JS Bin 畫面來一下：

4. 在開始 JS 之前，先提一下本次會用到 ES6 組字串功能，如果有興趣瞭解更多的朋友，可參閱 Day03【ES6 小筆記】JS 組字串好方便！一目瞭然最清楚（模板字串符 template literal），回頭來講解一下本次題目的 HTML 中，在 <div class="content">下的<div class="box"> 以及<div class="page_btn"> 下的<span>雖然我們為了 CSS 調整而先做出內容，但實際執行時，卻都會由 JS 去跑出真正內容 然後取代掉原本我們寫在 HTML 中的內容。

5. 今天先到這裡，明天再來繼續。