最近學習了雪碧圖的使用,雪碧圖的好處這塊就不多說了,只說應用部分。
雪碧圖的使用依賴於background-position這個屬性,屬性值分別為x,y軸的值,圖片的顯示大小由容器決定,簡單點說,就是承載該圖片的大小是多大顯示區間就是多大,起始點就是background-position屬性值的座標。
素材取自慕課網雪碧圖課程http://www.imooc.com/code/1992
<!DOCTYPE html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style> /*清除默认样式*/ html,body,ul,li,button,div,input,a{ padding:0; margin:0; } a{text-decoration:none} body{ font-size:10px;} .content input::-webkit-input-placeholder {color:#ccc;padding-left:30px;} </style> <style> /*书写样式*/ .content{margin-top:15px;padding:10px; width:190px;height:240px;background-color:#deeaf6;} .content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;} .content .text a{float:right; color:#696BF6;} .content input[type='text']{margin-bottom:15px;border:1px solid #CDCACA;width:100%; height:30px;border-radius:5px;background-color:#fff;} .button button{background:url("http://img.mukewang.com/539a972b00013e9102280177.jpg") no-repeat;width:100%;height:38px; margin-top:15px;border:none; } .button .btn1{background-position:0 0; } .button .btn2{background-position:0 -38px; } .button span{display:inline-block; width:100%;height:15px;border-bottom:1px solid #ccc; } </style> <body> <div class="content"> <input type="text" placeholder="邮箱/手机号/用户名"/> <input type="text" placeholder="请输入密码"/> <div class="text"> <input type="checkbox" id="box"/> <label for="box">下次自动登录</label> <a href="#">忘记密码?</a> </div> <div class="button"> <button class="btn1"></button> <span></span> <button class="btn2"></button> </div> </div> </body> </html>
書寫過程中遇到的幾個小問題:
清除a標籤樣式
使用text-decoration :none。其他屬性overline-上劃線,underline-預設的底線,line-through-貫穿線
改變placeholder的樣式
因為不同瀏覽器有相容性問題,這裡主要設定webkit內核瀏覽器、火狐瀏覽器、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