---
# System prepended metadata

title: 挑戰-金魚都能懂的網頁切版：互動圖文卡片

---

# 挑戰-金魚都能懂的網頁切版：互動圖文卡片

### 網頁網址
https://judyyutong.github.io/my-projects/hoverCard.html

### HTML版面結構
![](https://i.imgur.com/aV4iE2s.jpg)

```html=
<body>
<div class="base">
    <div class="wrap">
    
        <!-- 第1個圖卡 -->
        <div class="item">
            <img src="隨機假圖產生器網址並設定500x600像素"> 
            <div class="txt">
                <h2>第一個元件的標題</h2>
                <p>第一個元件的段落文字 </p>
            </div>  
        </div>
        
        <!-- 第2個圖卡 -->
        <div class="item">
            <img src="隨機假圖產生器網址並設定500x600像素"> 
            <div class="txt">
                <h2>第二個元件的標題</h2>
                <p>第二個元件的段落文字</p>
            </div>  
        </div>
        
        <!-- 第3個圖卡 -->
        <div class="item">
            <img src="隨機假圖產生器網址並設定500x600像素"> 
            <div class="txt">
                <h2>第三個元件的段落文字</h2>
                <p>第三元件的段落文字</p>
            </div>  
        </div>
        
        <!-- 第4個圖卡 -->
        <div class="item">
            <img src="隨機假圖產生器網址並設定500x600像素"> 
            <div class="txt">
                <h2>第四個元件的段落文字</h2>
                <p>第四個元件的段落文字</p>
            </div>  
        </div>
    </div>
</div>
</body>
```

### 學習重點
- CSS flex 排版
- box-shadow 淡陰影立體感
- relative定位與absolute定位
- transition 控制元件屬性效果變化速度＋偽元素hover與after

### 1.  CSS flex 排版
 
 - 先進行CSS Reset，消除瀏覽器預設的多餘邊界空間。再建立一個 [Flexbox外容器] ``<base>``指定寬100%、高等同視窗高(100vh)與背景色，達到視窗滿版。
```css=
*{
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: 'Noto Sans TC', sans-serif;
        }
        
.base{
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:#F0F0F0;
        }
        
.wrap{
            width: 96%;
            display: flex;
            box-shadow: 12px 10px 40px 0px rgba(169,169,169,0.75);
        }        
```

- ``display: flex;``
宣告外容器使用flex排版，且不另做設定的情況下，主軸資料流向預設是 [row由左往右] (= flex-direction:row )

- **設定主軸**``justify-content: center;``
指定主軸的資料分佈為「置中」。
主軸資料流向 [row由左往右] ｘ 主軸資料分佈 [center置中] = 水平置中

- **設定次軸**``align-items: center;``
指定次軸的資料分佈為「置中」。
由於主軸是 [row由左往右]，因此次軸相對就是 [column由上往下]，
因此這邊的次軸資料分佈 = [column由上往下] × [center置中] = 垂直置中

- **``<base>``內再建一個容器``<wrap>``用於包裹4張item圖卡**
- + ``<wrap>``寬度設96%，加上受到``base``的flex屬性影響，``<wrap>``容器寬度會略縮於視窗，同時垂直與水平置中瀏覽器視窗。
- + ``<wrap>``也設定``display:flex``，預設row，如此一來之後放入的4張圖卡就會在``<wrap>``之中 [由左往右]排列。
 
### 2. box-shadow 製造淡陰影立體感

- 幫容器``<wrap>``設定半透明陰影增添立體感
- + ``box-shadow: 12px 10px 40px 0px rgba(169,169,169,0.75);``
- + 第1個值：offset-x **陰影x值位移量** 
- + 第2個值：offset-y **陰影y值位移量** 
- + 第3個值：blur-radius **陰影模糊半徑**
- + 第4個值：spread-radius **陰影擴散半徑**
- + 第5個值：color 陰影色彩 (若使用rgba格式則可以透過給予alpha值「0完全透明~1不透明」去控制色彩半透明程度。)

### 3. relative定位與absolute定位
```htmlembedded=
 <div class="item">
    <img src=""> 
    <div class="txt">
        <h2></h2>
        <p></p>
    </div>  
</div>
```
```css= 
.item{position: relative;}
```
```css= 
.item .txt{position: absolute;}
```
**讓``<div class="txt">``文字覆蓋壓在``<img>``圖卡之上：**
父層``relative``與子層``absolute``搭配，能使``<div class="txt">``這個div容器能脫離網頁原本的文件流(document flow)邏輯，讓``<div class="txt">``文字重疊到``<img>``圖卡身上，而不去影響其他元件的空間排序。

![](https://i.imgur.com/QzB65c6.jpg)
> 上圖說明：如果``txt``沒有指定``position:absolute``，則``txt``會接續在``<img>``圖卡之後，無法疊在圖卡上。

![](https://i.imgur.com/MTKTgl3.jpg)
> 上圖說明：``<div class="txt">``指定``position:absolute``後，文字就能疊在``<img>``圖卡上。

- + **關於static**：網頁元件預設都是``position:static``，表示元件會靜態地依照hmtl的層級順序相貼排列。然而``static``不擁有位置屬性(無法給予x、y值控制位置)，無法操作排版，所以通常會指定給元素``static``以外的屬性，例如：relative、absolute、fixed...。

- + **關於absolute**與**relative**搭配：被指定``position:absolute``的容器，其「父層」必須擁有「位置屬性」，才能讓``absolute``有**定位的「依據」**。
- + + 因此若父層使用``static``(無位置屬性)，則子層``absolut``會因無所依據，便往更上層直到找到有位置屬性的父層。假如一路上都沒有遇到任何父層容器有位置屬性，最後就會找上文件的最根本 —「html」作為父層來做絕對定位。

> [【Web Dev Simplified】``position: absolute`` absolutely positions elements inside of some parent container that it can reference](https://www.youtube.com/watch?t=276&v=jx5jmI0UlXU&feature=youtu.be)

> [【Web Dev Simplified】otherwise that element will just fall back to the next relatively position parent or all the way  back to the html element itself.](https://www.youtube.com/watch?v=jx5jmI0UlXU&t=322s)

- + + 由於``position``眾多屬性中只有``static``是沒有位置屬性的，因此想要子層的``absolute``生效，只要父層指定``static``「以外」的都可以生效，諸如：relative、absolute、fixed......等。[所以Amos教學影片中才會說「都市傳說子層absolute父層就『一定要』relative — 這是錯誤的觀念。」](https://www.youtube.com/watch?t=370&v=IocyLERRdko&feature=youtu.be)

- + + 父層``relative``＋子層``absolute``是常見搭配，並非唯一。

###  4. transition 控制元件屬性效果變化速度＋偽元素hover與after
- **transition：opactity 不透明度＋偽元素hover** 
當游標滑上圖卡時文字才完全顯示

```css= 
.item .txt{opacity 0;}
```
```css= 
.item:hover .txt{opacity 1;}
```
+ + + 先讓``<div class="txt">``文字完全透明
+ + + 父層被摸到，子層做事情，當游標滑上(hover)父層``<div class="item"> ``(包著圖卡的容器)時，子層`` <div class="txt">``就會被完全看見=完全不透明=``opacity:1``

> opacity：0.0 （完全透明）～1.0（完全不透明）

```css= 
.item .txt{
opacity 0;
transition: opacity .5s
}
```
+ + + 使用``transition``讓「不透明度」的變化過程歷時0.5秒。讓游標滑上去時的文字顯示比較自然，有種微妙的時間差逐漸顯現。如果不設``transition``，游標滑上去時，會因為切換得太突然顯得生硬。


+ **transition：width + 偽元素after**
當游標滑上(hover)圖卡時，``<h2>``標題之後會長出細色塊

```css=
.item h2:after{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    background-color:DeepPink;
        }
```
+ + 1. 先在``<h2>``標題字「之後(after)」加上一條高度只有2px的扁色塊，讓他看起來像一條細線，``margin``外距上下10px、左右為0，``width``寬度100%，色條會撐滿與文字容器等寬。
```css=
.item h2:after{
    content: '';
    display: block;
    width: 0%;
    height: 2px;
    margin: 10px 0;
    background-color:DeepPink;
    transition: width .5s .5s;
        }
        
.item:hover h2:after{
    width:100%;
        }
```

+ + 2. 改為當游標滑到(hover)父層``<div class="item"> ``時，``<h2>``「之後(after)」才開始長出色條。
+ + + 色條從「寬度0%」經過 ``transition``寬度屬性，歷時(duration)0.5秒，延遲(delay)0.5秒後，長成「寬度100%」。


### 5.備註
> 【01】設定``display: block``才能讓色條在排版上顯示在``<h2>``大標的下方。
> + 如果改設為``display: inline-block``，則色條會變成從``<h2>``大標的右側同一行處開始顯示，直到撐滿文字容器塞不下才移動到``<h2>``大標下方。

![](https://i.imgur.com/pBAEzfR.gif)

（display: inline-block 色條顯示方式）

> 【02】偽元素例如``hover``、``after``...等等一定要給予``content``屬性，裡面可以給值，也可以維持空的``content: '';``，無論如何，若沒有寫上``content``，偽元素無法出現在畫面上。