這次通過這個個性化的輸入框，給大家介紹一些容易忽略的知識點。(新手注意：本文的html採用的是jade，css採用的sass，js採用的vue)一、效果
大家先看一下效果動態圖，思考一波，帶著你的思考來看接下來的內容，可能效果更好一點。
pc端demo位址
二、需求
當我們開始做一樣東西的時候一定要先分析它的需求：
* 當輸入框獲取焦點時，提示文字發生上移動畫，同時下面線條產生動畫；
* 當輸入框失去焦點時，並且未填寫內容時，提示文字和線條恢復之前的狀態。
* 當輸入框失去焦點時，填寫內容時，狀態不變。
三、結構
看了上面的效果圖，首先就是要確定html的結構：
input(type="text"
name="card"
id="card" placeholder="身份證" v-card="" maxlength="18")
label(for="card") card
div.focusline
這裡唯一遺憾的是input不支援偽元素(::after、::before)，所以不得不採用乙個額外的div。
這裡額外提一下，maxlength 只能用於input的type為password和text的情況，所以不要再問為什麼maxlength不起作用了。
四、表現
其實對於上面所要實現的效果，我們完全可以通過js來控制，但是一直在強調表現（css）與行為（js）分離，所以我們完全通過css的特性解決表現上的問題，更加完美。但是並不是所有css屬性瀏覽器多支援（這就尷尬了）。這裡我要用的幾個特性，大家最好在chrome中實驗。
其實需求1與需求2是同乙個需求，通過偽類focus和過渡屬性就能搞定。
input
:focus + label
input
:focus ~ div
input
}
input
:not(
:placeholder-shown) + label
input
:not(
:placeholder-shown) ~ div
這裡我還要嘮叨一下，從上面可以看出這是乙個身份證輸入框，我們多知道身份證是由數字和字母，而且字母只出現在第18位，而且只能是字母x。所以我上面採用了text型別的輸入框，為了讓使用者很好的輸入，會出現這幾種問題：
* 切換為中文輸入法時存在的問題；
* 複製貼上的問題；
* 輸入其他非法字元的處理。
這裡我們主要通過input、compositionstart、compositionend、paste四個事件解決。
let legalcontent, //開啟輸入法之前的輸入內容
lock = false; //是否開啟中文輸入法
el.addeventlistener('compositionstart', (e) => , false);
el.addeventlistener('compositionend', (e) => , false);
el.addeventlistener('input', (e) => else
}}, false);
el.addeventlistener('paste', (e) => , false);
CSS並不簡單 z index引發的思考
今天話題是由z index的偶然失效，引發的一系列問題。一 序 從定義上看z index真的是個很簡單的屬性，就是描述元素的層疊順序，但是有時間我們會發現z index並不會起作用。這時候我們就需要好好的理解一下z index背後的問題。二 拋開position和z index 我們多知道posit...
常見的CSS樣式,建立個性化頁面
為什麼需要 css樣式表？在我們在開發 時，我們知道 html 標籤的外觀樣式比較單一，一般顏色只有黑白 字型型別和大小無變化，而樣式表的作用相當於華麗的衣服，使用樣式表使我們的 更漂亮 使用樣式表能實現內容與樣式表分離，同時也方便團隊開發 美工做樣式，程式設計師寫 所以我們在開發 時，樣式表是不可...
使用CSS3 font face實現個性化字型
在網頁中，我們可以用css的font family屬性來定義字型，然而定義的字型在使用者的電腦上能否正確呈現則要看使用者的電腦是否安裝了該字型。我們經常能看到國外的一些個人 使用了非常漂亮的字型，而這些字型通常在使用者的電腦中是沒有安裝的，所以用font family屬性就無法實現了，今天我們就介紹...