Blogger Information
Blog 12
fans 0
comment 0
visits 11002
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
精灵图、阿里图标
amin
Original
1482 people have browsed it

精灵图

  • css

    1. .box1 {
    2. width: 500px;
    3. height: 400px;
    4. border: 1px solid #000;
    5. background-image: url("1.png");
    6. background-repeat: no-repeat;
    7. background-position: 50px 20px;
    8. }
    9. .box2 {
    10. width: 110px;
    11. height: 110px;
    12. background-image: url("1.png");
    13. background-repeat: no-repeat;
    14. background-position: -220px -110px;
    15. }
    16. .box3 {
    17. width: 110px;
    18. height: 110px;
    19. background-image: url("1.png");
    20. background-repeat: no-repeat;
    21. background-position: -220px -220px;
    22. }
  • html

    1. <div class="box1"></div>
    2. <div class="box2"></div>
    3. <div class="box3"></div>
  • 效果图

阿里图标使用方法

Correcting teacher:WJWJ

Correction status:qualified

Teacher's comments:知识点写到了,但是内容不够充实!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post