純 CSS 製作自適應 RWD 正方形,可隨容器寬度大小改變,自動調整容器高度,維持正方形比例,而正方形容器中一樣可以有內容,不受影響
HTML:
CSS:
example:
See the Pen
CSS RWD square 正方形 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square
[……]
純 CSS 製作自適應 RWD 正方形,可隨容器寬度大小改變,自動調整容器高度,維持正方形比例,而正方形容器中一樣可以有內容,不受影響
HTML:
CSS:
example:
See the Pen
CSS RWD square 正方形 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square
[……]
漂亮的字體可以讓增添網頁個性及可讀性,但要注意載入外部字型 / 字體則會增加網站下載的時間,這兩者的平衡則交由網頁設計師的判斷,本篇介紹如何將外部字型載入 CSS 中
font-family: 定義字體的名稱 'Helvetica'
,這名稱是可以自定義的
src: 依序載入字體,而 local( "Helvetica" )
,會先找使用者電腦中是否有安裝此字體,如果有則直接使用使用者的系統字體,如果使用者系統沒此字體再依序下載字體
url: 相對路徑或絕對路徑
字型格式附檔名format()
指定方式WOFF(Web Open Font Format).woff"woff"
TrueType.ttf"truetype"
OpenType.ttf 或 .otf"opentype"
Embedded OpenType.eot"embedded-opentype"
SVG Font.svg 或 .svgz"svg"
Refrance:
https://blog.gtwang.org/web-development/css-font-face/
https://www.iware.com.tw/qa-508.html
[……]
HTML
CSS
Example
See the Pen
CSS ul li Horizontal center – flex by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
https://wcc723.github.io/css/2017/07/21/css-flex/
[……]
這是目前我認為最簡單的方法,最下方可以看到Example,特別加上一點特效
See the Pen
CSS ul li horizontal align center by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
[……]
圓標是網頁表現手法很常見的一種方式,尤其電商,很常見用來突顯商品特價 產品 或新產品的標籤,以下介紹圓標的製作方式
先建立一個兩層結構的HTML如下,圓標文字包裹在內層div中
未方便辨識,先把兩個容器背景設為綠色及紅色的純色,這樣就能清楚了解容器範圍,並且先製作外層容器
接著用 CSS3.0 水平垂直居中的技巧,讓文字固定於正中間
再給文字添加一些樣式
透過顏色的區分,很容易看到兩個容器的關係,最後再慢慢調整文字及圓表尺寸顏色等樣式,以下是本教學的範例
See the Pen
文字圓標 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
[……]
CSS選擇器中沒有所謂的「萬用字元(*)」,可以透過一些方式接近模糊查詢方式,查找匹配屬性或值的元素
下表屬性名稱不一定為Class,可以替換成需要的屬性
單引號可有可無
[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值
See the Pen
CSS 選擇器,模糊查找匹配元素 by VECTOR.cool (@ann71727)
on CodePen.
[……]
安裝 reCAPTCHA v3 之後,頁面右下角就會多出隱私權圖標這東西,在某些場合可能需要把它隱藏起來,可以透過下面方式隱藏
注意:請不要使用 display: none 這可能會使reCAPTCHA v3失去作用
https://wordpress.org/support/topic/how-do-i-hide-recaptcha-v3-badge/
https://wordpress.org/support/topic/recaptcha-v3-badge-is-displayed-on-all-pages-not-only-form-pages/
[……]
此做法前提,需要 iframe 內容在相同網域下
https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe
[……]