Skip to content

Latest commit

 

History

History
394 lines (217 loc) · 7.91 KB

4.-ban-mian-ou-kuai-shi-zuo.md

File metadata and controls

394 lines (217 loc) · 7.91 KB

4 練習

1 介面 - Alerts

檔名建議：alert.html

說明：

  • 藍色背景色 #cce5ff，邊框 1px 實線，邊框顏色 #b8daff。
  • 紅色背景色 #f8d7da，邊框 1px 實線，邊框顏色 #f5c6cb。
  • 內距(padding)：上下 5px、左右 10px。
  • 圓角(border-radius)：5px。
  • 藍色、紅色分別是一個 div 區塊即可。

結果示意圖：

提供 html：

<div class="alert">
  這是一般的文字訊息
</div>

<div class="alert -error">
  這是警告的文字訊息
</div>

參考作法：

{% embed url="https://codepen.io/carlos411/pen/BaBPPvB" %}

2 介面 - Button 按鈕

檔名建議：button.html

說明：

  • 請用 button 標籤( type="button" )製作。
  • 文字大小 1rem、文字顏色 #007bff。邊框 1px 實線、邊框顏色 #007bff。
  • 按鈕圓角(border-radius) .25rem。
  • 按鈕內距(padding)：.375rem .75rem 。
  • 滑鼠移過：文字顏色 #FFF。背景顏色 #007bff。
  • 滑鼠移過游標(cursor)變成： pointer。

結果示意：

{% embed url="https://youtu.be/XXBss3TP3H0" %}

參考作法：

{% embed url="https://codepen.io/carlos411/pen/abojayR" %}

3 介面 - Breadcrumb 麵包屑

檔名建議：breadcrumb.html

說明：

  • 最外層 div，裡面請用 ol 標籤製作。
  • 連結文字顏色 #007bff，滑鼠移過後變成 #0056b3。
  • 提示：斜線可用 ::before 來創造，顏色為 #aaa。
  • div 背景色為 #e9ecef，內距上下 5px、左右 10px。圓角 5px。

結果示意圖：

提供 html：

<div class="breadcrumb">
  <ol class="breadcrumb_list">
    <li><a href="#">首頁</a></li>
    <li><a href="#">分類頁</a></li>
    <li>商品頁</li>
  </ol>
</div>

參考作法：

{% embed url="https://codepen.io/carlos411/pen/JjPBBgZ" %}

4 介面 - 直向圖文編排

檔名建議：text_vertical.html

說明：

  • 圖片路徑：https://picsum.photos/id/729/500/300
  • 圖片點擊開新分頁連至外站(任意網址皆可)。
  • 最外層用 article 標籤製作。寬度 300px。
  • 標題「農夫耕種的照片」用 h1 標籤製作。
  • 標題文字大小 1.2rem。

結果示意圖：

直向圖文編排

參考作法：

{% embed url="https://codepen.io/carlos411/pen/eYOjLxL" %}

5 介面 - 文繞圖

檔名建議：text_float.html

說明：

  • 圖片路徑：https://picsum.photos/id/729/500/300
  • 圖片點擊開新分頁連至外站(任意網址皆可)。
  • 最外層用 article 標籤製作。寬度 500px。
  • 標題「農夫耕種的照片」用 h1 標籤製作。
  • 標題文字大小 1.2rem。
  • 提示1：比照「直向圖文編排」，在結構上只加了一個「圖片簡述的文字」，其餘結構完全不會變，只調整樣式。
  • 提示2：連結區塊(灰框部份)設定成向左的浮動(float)。

結果示意圖：

橫向圖文編排

參考作法：

{% embed url="https://codepen.io/carlos411/pen/JjPBmYP" %}

6 介面 - Pagination 分頁

檔名建議：pagination.html

說明：

  • 列表使用 ul 標籤。
  • 框線顏色：#dee2e6。
  • 文字顏色：#dee2e6。
  • 滑鼠移過：背景色變成 #e9ecef；文字顏色變成 #0056b3。
  • 假設在第1頁：那 1 的樣式，預設要與滑鼠移過時的狀態一樣。

結果示意：

{% embed url="https://youtu.be/dZDItSmea2w" %}

參考作法：

{% embed url="https://codepen.io/carlos411/pen/wvwyKEP" %}

7 介面 - 用 CSS 做三角形

檔名建議：arrow_left.html

說明：

  • 假設是用 span 標籤做，可將四個邊框都設定成不同顏色，然後設定 10px 的實線(solid)，display 設定成 inline-block，寬高都設定 0。即可清礎看到箭頭。
  • 顏色的完全透明，有一個關鍵字叫 transparent。

結果示意：

用 CSS 做向左的箭頭

參考作法：

{% embed url="https://codepen.io/carlos411/pen/MWgOLLX" %}

8 介面 - 按鈕 tooltip

檔名建議： button_tooltip.html

說明：

  • 設定 tooltip 不要斷行：white-space: nowrap。

提供 html 結構：

<button type="button" class="btn">這是按鈕文字這是按鈕文字<span class="tooltip">這是提示文字</span></button>

結果示意：

{% embed url="https://youtu.be/-29-BrljG78" %}

參考作法：

{% embed url="https://codepen.io/carlos411/pen/PoYdjGB" %}

9 介面 - Popover

檔名建議：popover.html

說明：

  • popover 的背景色 #fed。邊框顏色 rgba(0,0,0,.3)。
  • 三角形旋轉 45deg：transform: rotate(45deg)。
  • 利用 ::before 來做三角形。

提供 html 結構：

<label class="popover_label">
  <input type="text" placeholder="輸入帳號">
  <span class="popover">
    僅能輸入英文字母、數字、底線(_)。
  </span>
</label>

結果示意：

{% embed url="https://youtu.be/GaWAvOf4izE" %}

參考作法：

{% embed url="https://codepen.io/carlos411/pen/VwZxLNG" %}

10 介面 - Input Group

檔名建議：input_group.html

說明：

  • placeholder 文字設定為「輸入 Email」。
  • :focus 狀態時，背景色改成 hsla(200, 80%, 90%, 1)。

提供 html：

<div class="input_group">
  <label>@</label>
  <input type="text" placeholder="輸入 Email">
</div>

結果示意：

{% embed url="https://youtu.be/XkhaR4a6Qew" %}

參考作法：

{% embed url="https://codepen.io/carlos411/pen/LYPdyYj" %}

11 介面 - List Group 列表群組

檔名建議：list_group.html

說明：

  • 請用 ul 標籤來製作。
  • 邊框顏色：#ccc。

結果示意：

參考作法：

{% embed url="https://codepen.io/carlos411/pen/OJLogEq" %}

12 介面 - Progress 進度條

檔名建議： progress.html

說明：

  • 進度條的背景色為 #e9ecef。圓角(border-radius) 8px。
  • 有進度的顏色背景為 #007bff。

結果示意：

進度條

提供 html：

<div class="progress_bar">
  <span class="progress" style="width: 20%;"></span>
</div>
  
<div class="progress_bar">
  <span class="progress" style="width: 70%;"></span>
</div>

參考作法：

{% embed url="https://codepen.io/carlos411/pen/gOYBapo" %}

13 介面 - 使用圖片客製化列表項目符號

檔名建議：list_item_custom_img.html

說明：

使用 ul 標籤完成下圖排版，將項目符號客製化：

圖片路徑：

https://alldata.sgp1.digitaloceanspaces.com/images/checkmark.png

參考作法：

{% embed url="https://codepen.io/carlos411/pen/zYxjMJw" %}

14 效果 - 影片第一屏滿版

檔名建議：video_first_screen.html

提供 html：

<div class="video_placeholder">
  <video id="the_video" muted loop autoplay playsinline>
    <source src="https://alldata.sgp1.digitaloceanspaces.com/videos/sample.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

<div class="other_contents">
  這是底部內容
</div>

呈現結果：

{% embed url="https://youtu.be/ojgjMnhgpXI" %}

參考作法：

{% embed url="https://codepen.io/carlos411/pen/rNNoVaP" %}

15 介面 - 雙態開關(checkbox)

直接提供參考作法：

{% embed url="https://codepen.io/carlos411/pen/WxojBK" %}

其它參考(需要 JS 程式)

1 介面 - Modal 彈出視窗

或稱做 lightbox(燈箱)，直接提供參考做法：

{% embed url="https://codepen.io/carlos411/pen/wvwYKXN" %}

2 介面 - Tab 頁籤

直接提供參考做法：

{% embed url="https://codepen.io/carlos411/pen/WNeJQzp" %}

3 效果 - 使用 scrollTo() 函式，點擊按鈕，頁面滑到最上方

參考作法：

{% embed url="https://codepen.io/carlos411/pen/dyywPBP" %}