純 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
[……]
希望強制讓使用者下載檔案,但是在a標籤將網址指向檔案,在一些常用檔案例如:jpg、png、PDF,常會被瀏覽器直接開啟,無法直接下載,比較正規的做法是在發送 headers 時做這件事,但有時我們在處理靜態網頁就可以用偷吃步,在HTML5 a 標籤中多了一個download屬性,就可以用強制檔案用下載的方式讓使用者下載a標籤連結中的檔案,但這偷吃步要小心瀏覽器相容性
[……]
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.
[……]
今天在開發一個表單程式,表單一直無法發送,開始來找問題,開啟 Chrome 開發者工具,在 Console 面板中,每送出一次表單,就會出現一個這個訊息:
An invalid form control with name=’…’ is not focusable
也對拉!! 必填欄位又隱藏起來,怎麼填? 表單送出前會做一個簡單的表單驗證
這樣也不行:
<input type="text" style="display:none" required>
這樣當然也不行:
<input type="text" id="example" required> <script> $('#example').hide(); </script>
這樣可以:
大概是原本就是隱藏欄位了,所以沒有特別去驗證
<input type="hidden" required>
開發者會去隱藏欄位當然是有原因的,有時候會因為條件判斷而顯示不同輸入欄位,例如:居住地下拉選單,但使用者可能住於國外,所以表單設計在下拉選單尾端加一個”海外”的選項,選擇了海外,就出現一個自行輸入的文字欄位,像這樣的需求其實蠻常見的,這些輸入欄位通常都只是隱藏起來,依照判斷來顯示,這種欄位當然有可能顯示出來就是必填,下方介紹幾個解決方法來解決這個問題。
在 form 屬性加上 novalidate,關閉預設的表單驗證,表單內的所有欄位都不會進行驗證,除非有其他方式進行表單驗證,不然不建議這麼做。
<form novalidate> <input type="text" id="example" style="display:none" required> <input type="submit" value="submit"> </form>
在顯示的時候,再加上 required,如此,不管隱藏的文字欄位顯示與否,表單都可以正確送出,文字欄位顯示時,就必須填寫。
<form> <input type="text" id="example" style="display:none"> <input type="submit" value="submit"> </form> <hr> <input type="button" id="show" value="show"> <script> $('#show').click(function(e){ $('#example').css('display','block').prop('required',true);; }); </script>
這是一個簡單的提示,實務上的做法就看大家如何發揮創意了
[……]
在 HTML5 的 <html> 中可增加 lang= 來標註網頁的語系,讓瀏覽器能更正確的解析與編碼,但從 XHTML 1.0 以來 lang=??? 就不斷演進中,而在 HTML5 的時代究竟要怎麼定義?
目前最主要的規範是依照 IETF(Internet Engineering Task Force 國際網路工程研究團隊)的 RFC 4646 的 Tags for Identifying Languages 所定義。它的要求為 language-script-region-variant-extension-privateuse 就是 語言 – 字體 – 地區 – 方言 – 特殊附加資訊。
以台灣繁體中文標示即為 zh-Hant-TW 不是以往認知的zh-tw囉
zh-Hant繁體中文zh-Hant-TW臺灣使用的繁體中文zh-Hant-CN大陸地區使用的繁體中文zh-Hant-HK香港地區使用的繁體中文zh-Hant-MO澳門使用的繁體中文zh-Hant-SG新加坡使用的繁體中文
zh-Hans簡體中文zh-Hans-CN大陸地區使用的簡體中文zh-Hans-HK香港地區使用的簡體中文zh-Hans-MO澳門使用的簡體中文zh-Hans-SG新加坡使用的簡體中文zh-Hans-TW臺灣使用的簡體中文
[……]
HTML提供了一個錨點連結的功能 (anchor tag link),換頁或不換頁,都可以把瀏覽器卷軸自動捲到錨點位置,但如果網頁上方有一個黏頭的Header (sticky header),RWD手機版本則習慣使用(sticky header),Header 懸浮本文之上,可能會把錨點的元素內容遮蔽,這時我們則需要偏移(sticky header)的高度,避免錨點元素被遮蔽。[……]