4 練習
Last updated
Last updated
檔名建議：alert.html
說明：
藍色背景色 #cce5ff，邊框 1px 實線，邊框顏色 #b8daff。
紅色背景色 #f8d7da，邊框 1px 實線，邊框顏色 #f5c6cb。
內距(padding)：上下 5px、左右 10px。
圓角(border-radius)：5px。
藍色、紅色分別是一個 div 區塊即可。
結果示意圖：
提供 html：
參考作法：
檔名建議：button.html
說明：
請用 button 標籤( type="button" )製作。
文字大小 1rem、文字顏色 #007bff。邊框 1px 實線、邊框顏色 #007bff。
按鈕圓角(border-radius) .25rem。
按鈕內距(padding)：.375rem .75rem 。
滑鼠移過：文字顏色 #FFF。背景顏色 #007bff。
滑鼠移過游標(cursor)變成： pointer。
結果示意：
參考作法：
檔名建議：breadcrumb.html
說明：
最外層 div，裡面請用 ol 標籤製作。
連結文字顏色 #007bff，滑鼠移過後變成 #0056b3。
提示：斜線可用 ::before 來創造，顏色為 #aaa。
div 背景色為 #e9ecef，內距上下 5px、左右 10px。圓角 5px。
結果示意圖：
提供 html：
參考作法：
檔名建議：text_vertical.html
說明：
圖片點擊開新分頁連至外站(任意網址皆可)。
最外層用 article 標籤製作。寬度 300px。
標題「農夫耕種的照片」用 h1 標籤製作。
標題文字大小 1.2rem。
結果示意圖：
參考作法：
檔名建議：text_float.html
說明：
圖片點擊開新分頁連至外站(任意網址皆可)。
最外層用 article 標籤製作。寬度 500px。
標題「農夫耕種的照片」用 h1 標籤製作。
標題文字大小 1.2rem。
提示1：比照「直向圖文編排」，在結構上只加了一個「圖片簡述的文字」，其餘結構完全不會變，只調整樣式。
提示2：連結區塊(灰框部份)設定成向左的浮動(float)。
結果示意圖：
參考作法：
檔名建議：pagination.html
說明：
列表使用 ul 標籤。
框線顏色：#dee2e6。
文字顏色：#dee2e6。
滑鼠移過：背景色變成 #e9ecef；文字顏色變成 #0056b3。
假設在第1頁：那 1 的樣式，預設要與滑鼠移過時的狀態一樣。
結果示意：
參考作法：
檔名建議：arrow_left.html
說明：
假設是用 span 標籤做，可將四個邊框都設定成不同顏色，然後設定 10px 的實線(solid)，display 設定成 inline-block，寬高都設定 0。即可清礎看到箭頭。
顏色的完全透明，有一個關鍵字叫 transparent。
結果示意：
參考作法：
檔名建議： button_tooltip.html
說明：
設定 tooltip 不要斷行：white-space: nowrap。
提供 html 結構：
結果示意：
參考作法：
檔名建議：popover.html
說明：
popover 的背景色 #fed。邊框顏色 rgba(0,0,0,.3)。
三角形旋轉 45deg：transform: rotate(45deg)。
利用 ::before 來做三角形。
提供 html 結構：
結果示意：
參考作法：
檔名建議：input_group.html
說明：
placeholder 文字設定為「輸入 Email」。
:focus 狀態時，背景色改成 hsla(200, 80%, 90%, 1)。
提供 html：
結果示意：
參考作法：
檔名建議：list_group.html
說明：
請用 ul 標籤來製作。
邊框顏色：#ccc。
結果示意：
參考作法：
檔名建議： progress.html
說明：
進度條的背景色為 #e9ecef。圓角(border-radius) 8px。
有進度的顏色背景為 #007bff。
結果示意：
提供 html：
參考作法：
檔名建議：list_item_custom_img.html
說明：
使用 ul 標籤完成下圖排版，將項目符號客製化：
圖片路徑：
https://alldata.sgp1.digitaloceanspaces.com/images/checkmark.png
參考作法：
檔名建議：video_first_screen.html
提供 html：
呈現結果：
參考作法：
直接提供參考作法：
或稱做 lightbox(燈箱)，直接提供參考做法：
直接提供參考做法：
參考作法：
