Home > Article > Web Front-end > Sprite application

Sprite application

高洛峰Original: 2016-10-09 13:38:511268browse

I recently learned how to use sprite images. I won’t go into details about the benefits of sprite images, only the application part.

The use of sprite images depends on the background-position attribute. The attribute values are the values of the x and y axes respectively. The display size of the image is determined by the container. To put it simply, the display interval is as large as the size of the image. The starting point is the coordinate of the background-position attribute value.

The material is taken from the MOOC sprite course 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=&#39;text&#39;]{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>

Several minor problems encountered during the writing process:

Clear the a tag style

Use text-decoration :none. Other attributes: overline - underline, underline - default underline, line-through - through line

Change the style of placeholder

Because different browsers have compatibility issues, here we mainly set the webkit kernel browser and Firefox browser There are three types of browsers: browser and IE browser. The pseudo-class is written as follows:

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

Solution to the misalignment of check boxes and text:

The default margin and padding cannot be removed for this problem. You can set the default margin and padding for both check boxes and text. Just use the vertical-align:middle attribute, as shown in the code:

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

Remove the light blue border when the input box gets focus

　 Set the input attribute outline:none

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of css cursor url usage formatNext article：Detailed explanation of css cursor url usage format

See more

Sprite application

Related articles