Photo by Halacious on Unsplash

❶ 關於Grid的名詞

🚀快速解說

👀慢慢闡述:

  • block ➡ 占滿一整行
  • inline ➡ 大小依內容決定,無法設定寬高
  • inline-block ➡ 可控制寬高

💡查詢HTML元素的預設→https://htmlreference.io/

  • 使用vertical-align: middle;
  • 使用display: block

❶ 使用vertical-align: middle;

Photo by Jackson So on Unsplash

🌲Three Ways to Insert CSS🌲

❶外部引入 External CSS

🚀使用時機: CSS是一個檔案

<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>

❷內部引入 Internal CSS

🚀使用時機: 同個檔案HTML和CSS分開放

<head>
<style>
body {
background-color: linen;
}
</style>
</head>

❸行內引入 Inline CSS

🚀使用時機: 直接放HTML標籤旁邊

<h1 style="color:blue;text-align:center;">This is a heading</h1>
Photo by Christopher Gower on Unsplash

關於Twitter專案

  • 前端的組員有:阿勛、Daisy(我)
  • 後端的 …

Photo by KOBU Agency on Unsplash

◆ 通用選擇器 Universal selector

◆ 型態選擇器 Type selectors

◆ Class選擇器 Class selectors

◆ ID選擇器 ID selectors

◆ 屬性選擇器 Attribute selectors

  1. 簡易屬性:div[target] {color:pink;}
  2. 精確屬性:div[target = name] {color:red;}
  3. 部份屬性(值包含name):div[target ~= name] {color:blue;}
  4. 部份屬性(值的開頭為name-):div[target|=name] {color:green;}

◆ 後代選擇器 Descendant selectors

◆ 子選擇器 Child combinator

◆ 同層相鄰選擇器 Adjacent sibling combinator

◆ 同層全體選擇器 General sibling combinator

◆ 群組選擇器 Groups of selectors

Photo by Aryan Dhiman on Unsplash

什麼是KeyboardEvent?

  1. keydown
  2. keyup
  3. keypress

如何區別keydown、keyup以及keypress?

  1. keydown:按下的時候
  2. keyup:釋放的時候
  3. keypress:只有產生字的時候才會觸發
    以中文輸入法來看,輸入注音符號時,因為還沒產生完文字,所以不會被觸發。Fires when an actual character is being inserted in.

所以,如何完成按下enter送出中文的功能?

  • 你完成了什麼?花了多少時間?為什麼會做這些事?
  • 碰到什麼困難?如何解決?
  • 回頭檢視流程與成果時,哪些部分你覺得可能有改善的空間?

任務一:如何在表格中設置被選定的表格顏色

  • 花費時間:3個小時
  • 使用的功能:querySelector、addEventListener、parentElement、classList的add與remove
  • 步驟:利用querySelector將點選的範圍設置在白色表格,再設置事件監聽,當有checked發生(checkbox),event範圍使用parentElement回溯至父層的父層(被選定的白色表格),再利用classList新增或移除class:橘色。
  • 碰到的困難:因為對DOM的操作不熟練,所以花比較多時間去複習
  • 改善的空間:如果可以在過程中先想好步驟,並逐一分配各個步驟可以搭配的功能,複習完DOM之後,可以再加速開發的時間
//css
.table__row--checked {
background: var(--main-color);
}
//javaScript
// change color:table__row
const tableBody = document.querySelector(".table__body");
tableBody.addEventListener("change", function (event) {
const target = event.target;
const theParent = event.target.parentElement.parentElement;
if (target.checked) {
theParent.classList.add("table__row--checked");
} else {
theParent.classList.remove("table__row--checked");
}
});

任務二:如何設定表格的滑動效果

  • 花費時間:1個小時
  • 使用的功能:position、overflow、height
  • 步驟:將header固定後,讓下面的表格脫離頁面流,並離header50px,再使用overflow: scroll;切齊表格範圍並滑動,搭配height調整scroll的高度。
  • 碰到的困難:當我使用position的fixed和absolute後,滑動時白框表格總是會超過灰框表格,在研究overflow後,才發現必須設定height,才能完美設置滑動框的大小
.table__header {
position: fixed;
}
.table__body {
position: absolute;
margin-top: 50px;
overflow: scroll;
height: 500px;
}
  • 改善的空間:流程上,可以先利用border瞄準好要調整的部分,再做後續的CSS更動

  1. 完整的課程地圖
  2. 週進度的課程安排
  3. 完備的助教制度

Daisy

嗨!我是黛西

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store