Part 2 右欄月曆

第2部份月曆(Calendar) - 右欄DIV

在進入下面的進度前，因為內容會越來越多，內容有需要組織結構化，我們先將主畫面的css與左欄css格式整理至css/main.css與current-day.css，並在head中加上css的參考宣告：

註：先建立一個css目錄，將main.css與current-day.css放在css這個目錄中。 <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/current_day.css">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/cuurent_day.css">
  <title>My Calendar</title>
</head>
<style media="screen">

</style>
<body>
  <div id="current-day-info" class="color">
    <h1 id="app-name-landscape" class="off-color default-cusor center">My Calendar</h1>
    <div>
      <h2 id="cur-year" class="default-cusor center">2019</h2>
    </div>
    <div class="">
      <h1 id="cur-day" class="default-cusor center">Wednesday</h1>
      <h1 id="cur-month" class="default-cusor center">May</h1>
      <h1 id="cur-date" class="default-cusor center">14</h1>
    </div>
    <div class="">
      <button id="theme-landscape" class="button font">Change Theme</button>
    </div>
  </div>
</body>
</html>

在還沒進行右欄月曆表格時，我們先對這個網頁的應用程式設置網頁瀏覽器圖示 (圖示檔下載)，加入： <link rel="icon" href="images/icon1.png" type="image/png" sizes="72x72"/>

接著我們開始進行曆表格的HTML標籤元素輸入與編輯：

設定設置月曆標記文字(markup) 目前階段的程式連結, 在這邊我們使用emmet的快速輸入：
- Emmet使用： tr>th.weekday.border-color*7
- Emmet使用： tr*6>td{1}*7
使用emmet進行網頁的快速輸入：CODE HTML FASTER WITH EMMET
上一節的教學設置了左欄current-day-info版塊(div)，這一節教學加入月曆calendar版塊(div)，整個月曆應用程式最上層就這2個div版塊：current-day-info與calendar。

calendar區塊：

<div id="calendar">
  <h1 id="app-name-portrait" class="center off-color">MyCalendar</h1>
  <table>
    <thead class="color">
      <tr>
        <th colspan="7" class="border-color">
          <h4 id="cal-year">2019</h4>
          <div >
            <h3 id="cal-month">January</h3>
          </div>
        </th>
      </tr>

      <tr>
        <th class="weekday border-color">Sun</th>
        <th class="weekday border-color">Mon</th>
        <th class="weekday border-color">Tue</th>
        <th class="weekday border-color">Wed</th>
        <th class="weekday border-color">Thu</th>
        <th class="weekday border-color">Fri</th>
        <th class="weekday border-color">Sat</th>
      </tr>


    </thead>
    <tbody id="table-body" class="border-color">
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
  <button id="theme-portrait" class="font button color">Change theme</button>
</div>

Calendar CSS格式設定：

table {
  margin: 14px auto;
  padding: 7vh 0;
  border-collapse: collapse;
}

table, td, th{
  border: 1px solid #9C9C9C;
}

  #calendar {
    width: 66%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
  }
  #calendar #app-name-portrait {
    display: none;
  }
  #calendar #theme-portrait {
    display: none;
  }
  #calendar thead tr:first-child th div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #calendar h4 {
    margin: 0;
    padding: 0.8vw 0 0.2vw;
    font-size: 1.4vw;
    font-weight: 300;
  }
  #calendar h3 {
    margin: 0;
    padding: 0 2vw;
    font-size: 2vw;
    font-weight: 700;
    display: inline-block;
  }
  #calendar .weekday {
    font-size: 1.7vw;
    font-weight: 300;
    padding: 8px 0 5px;
    border-bottom: 1px solid white !important;
  }

#calendar #app-name-portrait { display: none; } #calendar #theme-portrait { display: none; } display:none是將這個區塊不顯示。(這2個div是用在直式的畫面上，未進入直式方向時，不顯示。) 也就是說，這2行在畫面是橫式時，會將直式的月曆標題與直式的按鈕進行隱藏。 flex-direction: column; 在calendar這個區塊裏的元素以直行的方式進行排列。 justify-content: space-around; 在calendar這個區塊裏的元素四邊設置相等空白的方式來排列。 justify-content: center; 在calendar這個區塊裏的元素置中對齊。 !important; 限制子元素不能覆寫此css格式設定。 #calendar thead tr:first-child th div，在月曆表格裏的thead中有2 個tr， tr:first-child是指2個tr中的第1個tr。

參考：圖解 Flexbox 基本屬性

格式化月曆 - 1 目前階段的程式連結

接著，對td進行設定：

#calendar tbody td {
  height: 5.2vw;
  width: 5.2vw;
  font-size: 0.8vw;
  font-weight: 600;
  vertical-align: top;
  padding: 0.5vw;
  transition: font-size .6s ease;
}

#calendar tbody td:hover {
  font-size:  1.2vw;
}

vertical-align: top; 垂直方向對齊：向上 transition: font-size .6s ease; 滑鼠移到元素上方時轉場的方式：font-size從0.8vw轉換到1.2vw，在0.6s內完成。轉場模式：ease。此部份請閱讀相關的文章：完整解析 CSS 動畫 ( CSS Animation )

格式化月曆 - 2 目前階段的程式連結

加入背景文字：

在body下加入二行文字：

<body>

  <h3 class="background-text off-color">2020</h3>
  <h4 class="background-text off-color">Calendar</h4>

以下略

CSS設定：

.background-text {
    position: absolute;
    opacity: 0.22;
    font-size: 20vw;
    z-index: -1;
    margin: 0;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
}

h4.background-text {
    top: 62%;
    font-size: 7vw;
}

position: absolute; 宣告目前這個區塊在上層標籤元素的絕對位置。 top: 50%; left: 56%; 父元素離上方與左方的距離設置。 transform: translate(-50%, -50%); 向 x 軸移動-50%距離，Y 軸移動 -50%距離。上面三個css設置是將background-text這個區塊置中 (父元素是body)。 opacity: 0.22; 透明度，製造出一個透明玻璃片效果。 h4.background-text 有包含類別background-text的h4元素

參考：DIV區塊三種置中方式

加入月份的導覽符號/圖示 (caret)

我們可以使用一些線上的素材加到我們的網頁內。

到 Font Awesome網站，找需要的caret符號/圖示：(請參考：圖示教學文件)，你需要申請一個帳號並建立一個Kits專案 (或者之直用我的代碼e45ac9a14a) 。

在head區塊中加入：

    <script src="https://kit.fontawesome.com/e45ac9a14a.js" crossorigin="anonymous"></script>

尋找caret符號，複製需要符號的嵌入標籤 (另外再加入icon類別css選擇子)

<div >
  <i class="fas fa-caret-left icon"></i>
  <h3 id="cal-month">January</h3>
  <i class="fas fa-caret-right icon"></i>
</div>

加入icon格式設定放大caret以及加入hover效果

#calendar .icon {
  font-size: 1.2vw;
}

#calendar .icon:hover {
  opacity: 0.6;
}

目前階段的程式連結

transition: font-size .6s ease; /* 轉場特效，字型大小變化的時候，以0.6s秒時間+ease方式進行轉場*/

加入便利貼與重點提示

便利貼圖案下載下載後，解開檔案，將裏面5個便利貼圖案複製到專案裏的images資料夾中：

將月曆中的某個表格元素(標出今日的方塊)背景色設成灰色

某個TD元素指定套用css:current-day

<td id="current-day">1</td>

設置css:current-day的背景顏色為#E1E1E1，灰色。

#calendar #current-day {
  background-color: #E1E1E1;
}

在月曆中的表格置入便利貼圖案

在某個TD元素中置入img標籤 (插圖)

<td>1 <img src="images/note1.png" alt=""></td>

設置#calendar img 格式

#calendar img {
    width: 3.8vw;
    vertical-align: top;
    position: relative;
    top: 0.5vw;
    /* left: 12px; */
}

在月曆顯示提示語

在便利貼圖標籤右邊加上提示語(使用span)

<td class="tooltip">1 <img src="images/note1.png" alt=""><span>這是提示！！！</span></td>

設置css:

.tooltip span {
  display: none;
}

.tooltip:hover {
  cursor: help;
  position: relative;
}

.tooltip:hover span {
  display: block;
  font-size: 1vw;
  padding: 6px;
  white-space: pre-wrap;
  width: 12vw;
  z-index: 100;
  background-color: #EDEDED;
  color: black;
  border-radius: 6px;
  left: 2vw;
  top: 4vw;
  position: absolute;
}

下圖說明提示字串與上層父元素td的CSS格式設置：

Part 2 右欄 月曆

第2部份 月曆(Calendar) - 右欄DIV