-
<body> <div class="container"> <form method="post" class="login-form"> <ul class="login"> <li> <input type="text" name="email" class="input-text" placeholder="郵箱/手機(jī)號(hào)/用戶名"> </li> <li> <input type="text" name="email" class="input-text" placeholder="請(qǐng)輸入密碼"> </li> <li> <span><input type="checkbox" class="checkbox" name="autologin" id="autologin"><label for="autologin">下次自動(dòng)登錄</label></span> <a class="forget" href="#">忘記密碼?</a> </li> <li> <input type="submit" class="login-btn" value=""> </li> <hr /> <li> <input type="button" class="reg-btn" value="" > </li> </ul> </form> </div>查看全部
-
<style> blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; list-style:none; } .container{ width:240px; background-color: #fff; margin:15px 15px 0 15px; border: 1px solid #d4d4d4; } .login-form{ display:block; padding: 15px; margin:10px; background-color: #ebf2fa; } li{ margin-bottom:12px; } .login-btn,.reg-btn { width: 190px; height: 38px; background: url(sp.png) no-repeat; } .login-btn{ background: url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg); } .reg-btn{ background: url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg); background-position:0 -38px; } .input-text{ width:185px; height:2em; text-indent:1.5em; } li label,a{ font-size:0.8em; } a{ color:blue; float:right; } .reg-btn{ margin-top:12px; margin-bottom:0; } hr{ border:1px solid #dedede; } </style>查看全部
-
雪碧圖的生成 PS/SPRITE工具自動(dòng)生成 CssGaga查看全部
-
使用雪碧圖SPRITE: 1,靜態(tài)圖片，不隨用戶信息的變化而變化 2，小圖片，圖片容量比較小 3，加載量比較大（數(shù)量多） 多張小圖拼裝成雪碧圖。 *一般大圖不用雪碧圖查看全部
-
登陸框表單查看全部
-
雪碧圖的加載和位置的設(shè)置查看全部
-
cssgaga軟件用于生成css雪碧圖查看全部
-
注意思考查看全部
-
快速生成雪碧圖的工具：CSS gaga查看全部
-
css sprite<br> 靜態(tài)圖片，不隨用戶信息變化而變化。<br> 小圖片，容量比較小<br> 加載量比較大。（目的是：有效的減少http請(qǐng)求的數(shù)量）<br> 大圖不建議拼成雪碧圖，加載時(shí)間長查看全部
-
原理：通過css的背景定位屬性：background-position來控制 坐標(biāo)軸,拼合背景圖的小圖(x,y)為負(fù)值 以雪碧圖左上角的定點(diǎn)為(0,0)坐標(biāo) 當(dāng)需要對(duì)坐標(biāo)系中的某個(gè)小圖標(biāo)進(jìn)行展示的時(shí)候，只需要取左上角的坐標(biāo)進(jìn)行偏移，例如(-100,0)，只需要將background-position:-100,0; 實(shí)現(xiàn)原理：控制一個(gè)層，可顯示的區(qū)域范圍大小，通過一個(gè)窗口，進(jìn)行背景圖的滑動(dòng)。查看全部
-
cssscrpite雪碧圖 靜態(tài)圖片，不隨用戶信息變化而變化。 小圖片，容量比較小 加載量比較大。（目的是：有效的減少http請(qǐng)求的數(shù)量） 大圖不建議拼成雪碧圖，加載時(shí)間長查看全部
-
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin: 0;padding: 0;list-style: none;font-size: 12px; font-family: "Arial", "sans-serif", "微軟雅黑", "宋體", "Tahoma";} img{vertical-align: middle; border:none 0} a{cursor: pointer;text-decoration: none} input,select{vertical-align: middle} form{padding:10px;width:200px;background-color:#EBF3FA;overflow:hidden;} input[type="text"],input[type="password"]{width:194px;height:38px;font-size:15px;border:1px solid #D4D9E3;border-radius:4px; margin-bottom:15px;text-indent:2em;} input[type="checkbox"]{margin:0;cursor:pointer;} label{vertical-align: middle;color:#67696B;} a{float:right;color:#0460AD;} button{width:194px;height:40px;background:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);} hr{height:1px;border:none;border-top:1px solid #D6D6D6;width:192px;} button[type="submit"]{margin:15px 0 10px;} button[type="button"]{background-position:0 -38px;margin:10px 0 0;}查看全部
-
line-height:31px; height:31px; 設(shè)置成跟一樣的值的作用：垂直居中.查看全部
-
原理：通過css的背景定位屬性：background-position來控制 坐標(biāo)軸,拼合背景圖的小圖(x,y)為負(fù)值 以雪碧圖左上角的定點(diǎn)為(0,0)坐標(biāo) 當(dāng)需要對(duì)坐標(biāo)系中的某個(gè)小圖標(biāo)進(jìn)行展示的時(shí)候，只需要取左上角的坐標(biāo)進(jìn)行偏移，例如(-100,0)，只需要將background-position:-100,0; 實(shí)現(xiàn)原理：控制一個(gè)層，可顯示的區(qū)域范圍大小，通過一個(gè)窗口，進(jìn)行背景圖的滑動(dòng)。查看全部
舉報(bào)
0/150
提交
取消