# 挑戰-金魚都能懂的網頁切版：互動圖文卡片 ###### tags: `HTML` `CSS` ### 網頁網址 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``，偽元素無法出現在畫面上。