스프라이트 애플리케이션-CSS 튜토리얼-php.cn

스프라이트 애플리케이션

高洛峰

풀어 주다： 2016-10-09 13:38:51

원래의

1282명이 탐색했습니다.

최근에 스프라이트 이미지 사용 방법을 배웠습니다. 스프라이트 이미지의 장점에 대해서는 자세히 설명하지 않고 애플리케이션 부분만 설명하겠습니다.

스프라이트 이미지의 사용은 background-position 속성에 따라 다릅니다. 속성 값은 각각 x축과 y축의 값입니다. 이미지의 표시 크기는 컨테이너에 따라 결정됩니다. 간단히 말하면, 이미지를 담고 있는 디스플레이의 크기이며, 간격은 얼마나 큰지, 시작점은 background-position 속성 값의 좌표입니다.

자료는 MOOC 스프라이트 강좌 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>

로그인 후 복사

작성 과정에서 발생한 몇 가지 사소한 문제:

태그 스타일 지우기

텍스트 장식:없음을 사용하세요. 기타 속성 윗줄 - 밑줄, 밑줄 - 기본 밑줄, 줄 관통 - 줄 통과

자리 표시자 스타일 변경

브라우저마다 호환성 문제가 있으므로 기본 웹킷 커널 브라우저 설정은 다음과 같습니다. , Firefox 브라우저 및 IE 브라우저는 다음과 같이 작성됩니다.

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

로그인 후 복사

확인란과 텍스트 정렬 문제에 대한 해결 방법:

이 문제 설정은 기본 여백 및 패딩입니다. 제거할 수 없습니다. 확인란과 텍스트 모두에 수직 정렬:중간 속성을 사용할 수 있습니다. 예를 들어 텍스트의 코드

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

로그인 후 복사

는 입력 상자가 밝은 파란색을 제거합니다. 색상 테두리

입력 속성 개요 설정: 없음