Front-end Development,
Effective Note-Taking.
本文介紹如何使用純 CSS 製作固定於右下角的 CTA 按鈕,無需依賴 JavaScript。主要方法包括使用 CSS 的 `position: sticky` 和 `position: fixed` 屬性來固定按鈕位置,並利用 `place-self: end` 來調整按鈕在網格中的定位。這樣的設計不僅減少頁面載入時間,還能降低維護成本。
此外,文章還介紹了如何使用 CSS 動畫來增強按鈕的視覺效果,透過 `animation-timeline: scroll()` 語法實現平滑過渡效果。由於某些瀏覽器尚未支援該語法,因此使用 `@supports` 進行兼容性檢查。這些技術使得在不使用 JavaScript 的情況下,仍能創建出互動性強且視覺效果豐富的按鈕。...
本文介紹了 3 種在 CSS 中建立響應式輸入欄位的方法。首先,使用 `min()` 函數可以根據螢幕尺寸動態調整欄位寬度,確保欄位不會超出容器邊界。其次,`display: flex` 提供更複雜的動態寬度調整,適合多元素的自適應排列。最後,`max-width` 方法透過限制最大寬度,並設置 `width` 為 100%,在不同螢幕上保持彈性。這些方法各有優缺點,`min()` 和 `max-width` 簡單易用,而 `flex` 提供更高的彈性但語法較複雜。
這些方法的範例代碼已放在 CodePen 上,讀者可以透過調整父層寬度觀察輸入欄位的變化。這三種方法能有效地提升表單在各種裝置上的美觀性和實用性,適合不同的開發需求和場景。...
vw 單位可讓字體隨螢幕寬度縮放,但當螢幕縮小時字體也會變小,可能造成閱讀困難。為解決此問題,可使用 calc()
反向計算字體,或透過 clamp()
函數設定字體的最大和最小值,避免字體過小或過大。
clamp()
接收三個參數:最小值、變動值和最大值,將字體大小限制在設定範圍內。使用 clamp()
搭配 vw
和 --font-size
變數,能在不同裝置上達到更好的字體顯示效果,避免傳統 media query
的繁瑣設定。...
分享一種表單樣式,當表單元件聚焦時,label 標籤會上移,失去焦點後返回原位。此樣式需設置 `placeholder=""`,避免刪除值時 label 不回到原位。可應用於 input 和 textarea。
若需要自動填入帳密,可使用 `autocomplete` 屬性,設置 `username` 和 `current-password`。也提供 CodePen 範例供參考。...
在網頁開發中,使用 object-fit 屬性可取代 CSS 的 background 語法,輕鬆實現圖片背景效果。object-fit 支援 SEO,圖片可用 img 標籤寫在 HTML 檔案中,讓搜尋引擎更易索引。這避免了 background 將圖片寫在 CSS 檔案中,無法被搜尋引擎收錄的問題。
object-fit 可應用於圓形頭像、整齊縮圖排列、Banner 底圖等場景,保持圖片比例不變,提升 SEO 效果。這屬性提供了靈活的圖片顯示方式,簡化了代碼,適用於多數現代瀏覽器。object-position 也可用於調整圖片定位,進一步增強設計靈活性。...
CSS 排版中,`margin: 0 auto;` 可讓版面左右置中,需先設定寬度。`padding` 可用於垂直置中,調整上下間距一致即可。`line-height` 適用於單行文字的垂直置中,需與元素高度相同。`position` 和 `transform` 可實現水平垂直置中,無需指定寬高,使用 `transform: translate(-50%, -50%);` 搭配 `position: absolute;` 即可。
`flex` 也是一種方便的置中方法。`transform` 與 `position` 結合,能在不知寬高的情況下置中,提供了靈活的排版選擇。...
CSS 排版中,對齊分為水平和垂直兩種。水平對齊常用 text-align
,而垂直對齊則是 vertical-align
。text-align
可以使內部元件置中,但不會影響自身版面。vertical-align
只適用於行內元素,對於 display:inline
和 display:inline-block
的元素有效。若要垂直對齊多行文字,可使用 display:table-cell
。
其他對齊方式還有 margin
、padding
、position
、line-height
及 display
(grid, flex) 等。理解設計需求,選擇合適語法,才能迅速完成排版。...
CSS Grid 是一種強大的佈局系統。首先,將 div 的 display 設為 grid,並定義 grid-template-columns 和 grid-gap。可以使用 fr 單位來設定相對寬度,達到 RWD 效果。重覆的 Grid 模式可用 repeat() 簡化。Grid 排序可用 grid-auto-flow,預設為 row,改為 column 則變成縱向排列。
可用 order 屬性改變 div 的排序,未指定的順序為 0。指定順序後,div 會依照 order 值重新排列。這些技巧能有效提升網頁佈局的靈活性和可維護性。...
Bootstrap 4 引入 Flexbox 技術,革新了 Grid 系統,使得欄寬分配更靈活。相較於 V3,V4 增加了 576px 作為最小斷點,並新增 Extra Large 尺寸。欄寬可以不輸入數字自動平均分配,也可動態調整,並支持文字寬度調整。
在對齊方面,Bootstrap 4 利用 Flexbox 實現垂直與水平對齊,提供多種對齊方式,如置頂、置中、置底等。移除 gutter 可用 no-gutters class 完成,而 Column 排序則使用 flex-first、flex-last 等新語法。V4 的這些改變提升了設計靈活性與效率。...