雪碧圖應用

最近學習了雪碧圖的使用，雪碧圖的好處這塊就不多說了，只說應用部分。

雪碧圖的使用依賴於background-position這個屬性，屬性值分別為x,y軸的值，圖片的顯示大小由容器決定，簡單點說，就是承載該圖片的大小是多大顯示區間就是多大，起始點就是background-position屬性值的座標。

素材取自慕課網雪碧圖課程http://www.imooc.com/code/1992

 無標題文檔                            下次自動登入         忘記密碼？                                       

書寫過程中遇到的幾個小問題：

清除a標籤樣式

　　使用text-decoration:none。其他屬性overline——上劃線，underline——預設的底線，line-through——貫穿線

改變placeholder的樣式

　　因為不同瀏覽器存在相容性問題，這裡主要設定webkit核心瀏覽器、Firefox瀏覽器、IE瀏覽器三種，偽類的寫法如下：

::-moz-placeholder{color:red;}              //ff19+:-moz-placeholder{color:red}　　　　　　 //ff18-::-webkit-input-placeholder{color:red;}     //chrome,safari:-ms-input-placeholder{color:red;}          //ie10

複選框與文字不對齊的解決：

　　這個問題設定預設的margin和padding是無法去掉的，可以為複選框和文字都使用vertical-align:middle屬性即可，如文中代碼：

.content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}

去除輸入框擷取焦點時的淺藍色邊框

　　設定input屬性outline:none

