雪碧图应用

Posted 王小伞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了雪碧图应用相关的知识,希望对你有一定的参考价值。

最近学习了雪碧图的使用,雪碧图的好处这块就不多说了,只说应用部分。

雪碧图的使用依赖于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

 

以上是关于雪碧图应用的主要内容,如果未能解决你的问题,请参考以下文章

Sprite(雪碧图)的应用

自适应页面中如何使用雪碧图

制作雪碧图代码示例

createjs使用雪碧图代码

webpack雪碧图生成

前端工程师技能之photoshop巧用系列第五篇——雪碧图