# JS實戰-小米商城

## 前情提要

## 概念

## reset css


## Emmet縮寫用法

ul>li*5>a[href=#]

### 介紹一
[Emmet快速语法](https://code.z01.com/emmet/)
Emmet 是個支援多個編輯器的擴充程式，幫助我們在寫程式時，只要記相對應的縮寫，就能完整將關鍵字打出來。

后代：>
兄弟：+
上级：^
分组：()
乘法：*
自增符号：$

這整理得很清楚，有很多示範語句。

### 介紹二
[emmet文檔](https://yanxyz.github.io/emmet-docs/abbreviations/syntax/)
最詳細的那種。

### 介紹三
https://www.tedu.tw/blog/basic-emmet-tutorial-for-web-frontend-developer-newbies.html

像是部落格文章的方式來解說，比較平易。

## header的文字放中間，A與B的設置

.header{
    width: 100%;
    height: 40px; //這個是A
    background-color: #333;
    line-height: 40px; //這個是B
}


兩個數值相同，文字就可以在中間。

## font awesome

### CDN

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

## cdoe

<i class="fa-solid fa-cart-shopping"></i>

https://fontawesome.com/v6/icons/cart-shopping?s=solid&f=classic

原本使用其他選項，但死圖，後來發現只要改選別的就可以正常。

## 去除樣式（複習）

去除a的底線跟li的點點：

    text-decoration: none;
    list-style: none;

## 雪碧圖（Sprite）

> Sprite 是 Computer Graphics 的一個術語,
>
> 在 CSS 中使用主要的用處是減少 http 請求的數量, 從而降低服務器負載.
>
> 缺點很明顯, 沒有擴展性. 如果你想更改一張圖片, 就需要重新製作一個雪碧圖.

又被稱為拼合圖。在電腦圖學中，當一張二維圖像整合進場景中，成為整個顯示圖像的一部分時，這張圖就稱為精靈圖[1]。

因為常見碳酸飲料雪碧的英文名稱也是「Sprite」，也有人會使用雪碧圖的非正式譯名。

### 參考資料

[你知道雪碧圖嗎？有哪些優缺點？](https://itw01.com/84PNNE6.html)

[前端毫不費力使用雪碧圖Css Sprite精靈 | 加速網頁響應速度
](https://kknews.cc/code/2ellvm9.html)

[今晚，我想來點 Web 前端效能優化大補帖！系列 第 7 篇
Day07 X Image Sprites](https://ithelp.ithome.com.tw/articles/10269639)

## position絕對的使用

### 參考資料

[CSS relative? absolute? 傻傻分不清楚](https://ithelp.ithome.com.tw/articles/10212202)

[position - 金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/articles/10253500#:~:text=%E5%85%B6%E5%AF%A6%E9%80%99%E5%B0%B1%E6%98%AF%E4%B8%8D%E5%90%8C%20position,%E7%A9%BA%E9%96%93%E4%BD%9C%E7%82%BA%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%A9%BA%E9%96%93%E3%80%82)

[ui-ux練功坊/position-屬性的基礎概念](https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/position-%E5%B1%AC%E6%80%A7%E7%9A%84%E5%9F%BA%E7%A4%8E%E6%A6%82%E5%BF%B5-5931254e5203)

[CSS position 屬性教學：relative和absolute實作](https://mocationer.com/css-position-relative-absolute/)

<iframe width="560" height="315" src="https://www.youtube.com/embed/JOdZdHnuGmM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## 隱藏元素作法

最簡單的可以是display: none。
這邊為了做出有展開的效果，使用height: 0的寫法，要顯示的時候再把長度寫出來。

在JS30裡面也曾經用過這個技巧。

## 垂直居中的技巧之一

left: 50%

## 隱藏溢出元素

`overflow: hidden`

## 繪製三角形的技巧


.triangle{
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    width: 0px;
    height: 0px;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid  transparent;
}

把左右兩邊改成transparent是重點，然後就看你要往上還是往下的三角形。

## 懸停顯示區塊的做法

做一個div設定為`position: absolute;`

找到父元素設定`position: relative;`

這樣子width: 100%會跟著父元素的大小，這技巧屬實牛逼！

## css clear both
[w3schools](https://www.w3schools.com/cssref/pr_class_clear.php)

[學習 CSS 版面配置](https://zh-tw.learnlayout.com/clear.html)

## 刻出來的成果圖