-
<body> <div class="container"> <form method="post" class="login-form"> <ul class="login"> <li> <input type="text" name="email" class="input-text" placeholder="邮箱/手机号/用户名"> </li> <li> <input type="text" name="email" class="input-text" placeholder="请输入密码"> </li> <li> <span><input type="checkbox" class="checkbox" name="autologin" id="autologin"><label for="autologin">下次自动登录</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工具自动生成 CssGaga查看全部
-
使用雪碧图SPRITE: 1,静态图片，不随用户信息的变化而变化 2，小图片，图片容量比较小 3，加载量比较大（数量多） 多张小图拼装成雪碧图。 *一般大图不用雪碧图查看全部
-
登陆框表单查看全部
-
雪碧图的加载和位置的设置查看全部
-
cssgaga软件用于生成css雪碧图查看全部
-
注意思考查看全部
-
快速生成雪碧图的工具：CSS gaga查看全部
-
css sprite<br> 静态图片，不随用户信息变化而变化。<br> 小图片，容量比较小<br> 加载量比较大。（目的是：有效的减少http请求的数量）<br> 大图不建议拼成雪碧图，加载时间长查看全部
-
原理：通过css的背景定位属性：background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。查看全部
-
cssscrpite雪碧图 静态图片，不随用户信息变化而变化。 小图片，容量比较小 加载量比较大。（目的是：有效的减少http请求的数量） 大图不建议拼成雪碧图，加载时间长查看全部
-
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; 设置成跟一样的值的作用：垂直居中.查看全部
-
原理：通过css的背景定位属性：background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。查看全部
举报
0/150
提交
取消