# Week 5
###### tags: `SCSS`, `js` , `table` , `vite`

---

## 表格
#### 兩欄合併

//add colspan="2"
<td colspan="2">2 (colspan="2")
</td>

示意圖

[參考連結](https://codepen.io/qwe987299/pen/qMeoWx)

---

###
[30個你必須記住的CSS選擇器](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)

[SCSS 評論](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view)

---
## CSS feature in 2022
[Link](https://enlear.academy/4-exciting-new-css-features-in-2022-6a4e06552adb)

// :has

//

//

####

// 稀土開發者大會
//@layer
//tw already use this 
//layer class first
//權重最優先（反轉優先權） > !important
//
//layer | no layer
//需要訂定規則

//命名：不要用數字

[CSS命名](https://ithelp.ithome.com.tw/articles/10271827)

#### research
[sass-7-1-pattern.scss](https://gist.github.com/rveitch/84cea9650092119527bc)


#### 使用gulp時js要用on click

//Set background image for font color?
//

[JQuery事件處理 .click 與 .on()到底哪裡不同](http://skaih.logdown.com/posts/712464-jquery-click-on-the-where-different)

---

### Make cards image height same
[bio link](https://trendesignbook.com/blog/decor-trends/get-the-look-tulum-vibes/)

bfore

after

.post .post-gallery img {
    width: 100%;
    min-height: 200px;
    object-fit: cover;
}

## scss
[选择占位符%placeholder](https://www.w3cplus.com/preprocessor/understanding-placeholder-selectors.html)
[Smooth Scrolling](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior)

//Smooth Scrolling
scroll-behavior: smooth;

### marquee 替代方案 css

[bio link](https://codepen.io/thomasbormans/pen/EjMBqO?editors=1100)

https://tympanus.net/codrops/2021/05/26/how-to-code-a-crosshair-mouse-cursor-with-distortion-hover-effect/

https://tympanus.net/Tutorials/CrosshairDistortion/

https://easings.net/#

### Design
[why should use border](https://hching-lin.medium.com/ui-ux-%E4%B8%8B%E6%AC%A1%E4%B8%BB%E7%AE%A1%E5%95%8F%E4%BD%A0%E7%82%BA%E4%BB%80%E9%BA%BC-ui-%E8%A6%81%E7%94%A8%E5%9C%93%E8%A7%92%E7%9A%84%E6%99%82%E5%80%99-a5bf52cfdc1c)

[Design principles for web3](https://uxdesign.cc/designing-for-web-3-0-53ea939ac66)

---

## week3-4 作業修改

下方提供關於作業細節的建議：

scss:

1.這裡 Rotobo 字體應該放在最前面，這樣才最優先使用，另外中文是使用思源黑體哦~

2.container 容器需依照設計稿直接設定 max-width 與 padding

- 桌機是 1320px ( 需使用 max-width )，左右 padding 12px

- 平板是 720px ( 需使用 max-width )，左右 padding 與桌機相同，不需要另外設定

- 手機是 100% ( 滿版,需使用 max-width )，左右 padding 與桌機相同，不需要另外設定

index:

1..about-card-box 應該設定 margin:0 -12px 這樣才能使裡面最左和最右 li 貼齊 container

其他地方也是可以在注意

2.這裡和這裡這兩個地方本身就沒有 margin 不用再設定 margin 左右為 0

平板樣式也有設定 margin 左右為 0

3.桌機樣式已經設定過 margin:0 12px 平板就不用設定相同的樣式

5.這裡的設定應該是想消除最左最右的 margin 來達到貼齊 container 吧

可以直接在她父元素設定 margin:0 -12px 就好~

6.日期可以使用 <time> 標籤

7. .content-box 可以不用使用 flex 和 flex-direction:row 裡面元素本身就是由上往下排列了~

要置中可以使用 margin:0 auto 寬度可以使用 % 設定（像是電腦版時是 container 的 1/2），

手機則設定 100%，這樣裡面的 div 就不用設定 max-width

8.textarea 可以設定 resize:none 來讓使用者不能將他伸縮~

9.建議 h 標籤要按照順序使用，不要跳著使用(h5 沒用到直接使用 h6)

另外 h1 不要重複使用，像門市據點頁面，LOGO 是 h1 ，門市據點也使用 h1

10.門市據點電話可以使用 a 標籤

11.平板樣式出現一條線

如果沒問題就可以往下個章節前進囉！

若有問題歡迎隨時再發問，我們都會在線上協助你~

> [HTML <time> 标签](runoob.com/tags/tag-time.html)

<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>