本文章轉自:wowbox

CSS的簡單在於它易學，CSS的困難在於尋找更好的解決方案。在CSS的世界裡，似乎沒有完美這種說法。所以，現在介紹的CSS絕對底部，只是目前個人見過的方案中比較完美的吧。

先說我們為什麼會使用到這個CSS底部佈局解決方案：

當做一個頁面時，如果頁面內容很少，不足於填充一屏的窗口區域，按普通的佈局，就會出現下面圖片中的樣子(也就是底部內容並沒有位於窗口的底部，而留下了大量空白。



對於追未完美的設計師來說，這是不美觀的。網上有一些解決方案，但會出現當改變窗口高度時，底部和正文重疊的BUG。儘管沒有多少人會有事沒事兒的去改變窗口高度，但設計嘛，追求的就是盡善盡美。



下面是我找到的一個比較完美的方法，來自國外的設計達人，純CSS，可以實現：當正文內容很少時，底部位於窗口最下面。當改變窗口高度時，不會出現重疊問題。



甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部佈局方案。不知道他有沒有去申請專利:)

HTML代碼：

說明：使用這個佈局的前提，就是footer要在總的div容器之外，footer使用一個層，其它所有內容使用一個總的層。如果確實需要到添加其它同級層，那這個同級層就必須使用position:absolute進行絕對定位。

CSS代碼：
下面是主要的CSS代碼，讓你的底部可以位於窗口的最下面：

說明：需要注意的就是#main的padding值、footer的高度和負margin值，需要保持一致。

就是這麼簡單，不過還沒完。如果你的主體是使用懸浮佈局，還得解決一些瀏覽器的兼容問題，這裡使用的重點是為了Goolge Chrome。

對#main部份進行著名的Clearfix Hack:

注：該方案測試於兩欄懸浮佈局，兼容各大主流瀏覽器，包括Google Chrome。

P.S:
網絡上之前比較知名的footer佈局有Ryan Faits創造的，不過它的方法在HTML代碼中會有一個空的div層。嚴格來說，是不符合語義網代碼標準的。 
另外，還有一篇Exploring Footers article from A List Apart，但使用了一些JavaScript代碼。 
這樣一比較，上面看似簡單的純CSS，就顯得偉大許多了。 
OK！沒有了。如果沒看懂，具體的使用方法和說明可以到原站查看。

文轉自:https://yuugou727.github.io/blog/2018/02/20/html5-pattern/

 

#基本的 form

最簡單的表單驗證不陌生，只要 form 裡的 input 放個required屬性，那麼觸發 submit 時都會自動檢查該欄位有無填寫，沒有時截斷請求：

<form>

<input type="text" required>

<button type="submit">Send</button>

</form>

 

在遠古時代，表單是直接丟給後端，讓 server 說 yes or no 的，偶爾看到 php 裡用preg_match()，到前端繼續在 JS 裡用match()。多虧現在瀏覽器良好生態，直接寫在 html 就能做掉了，只要將 input 包進 form 裡，利用其原生 submit method 自動驗證。

type搭配pattern

input 本身已有很好用的type屬性，可以是 number, email, date, time 等等，端看需求，基本的驗證功能它都做好了，像是type="email"就會檢查 @ 以及 domain，足以勝任大部分的表單應用。

 

若要更進一步規範 input 的內容，就加上 pattern 屬性。只有在 type 為 text, search, tel, url, email, password 時的 input 生效。

而 pattern 屬性需帶入 Regular Expression (正規表示法)，這個網站有教學與練習。