Table of Contents 1_border graphics 2_Web Fonts 2.1_font-family 2.2_Web fonts 3_font icon 3.1_Knowledge 3.2_Use 4_ sprite map CSS Sprite 4.1_Knowledge 4.2_Use 5_cursor 6_Standard flow layout 6.1_by default 6.2_margin-padding position adjustment 7_Element positioning 7.1_ Know element positioning 7.2_Know the position attribute value Static positioning static Relative positioning relative fixed positioning fixed Absolute positioning absolute Sticky positioning […]
Tag: sprite
Production and use of svg sprite map
svg sprite map <!– 1. Make svg sprite display:none; does not take up space when hidden –> <svg style=”display: none;”> <symbol id=”one” width=”128″ height=”100″ xmlns=”http://www.w3.org/2000/svg”> <path d=”M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.77 4-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2. 679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785 -1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 […]
FE_CSS Sprite Map Technology Font Icon CSS Triangle
A web page often uses many small background images as decorations. When there are too many images in the web page, the server will frequently receive and send request images, which will cause excessive request pressure on the server, which will greatly reduce the loading speed of the page. Therefore, in order to effectively reduce […]
[Solved] Error using spritesmith Error: Invalid file signature
Questions When using spritesmith, the dependency package reported an error const Spritesmith = require(‘spritesmith’); const path = require(‘path’); const fs = require(‘fs’); const sprites = [ ‘./src/img/kaimo-001.png’, ‘./src/img/kaimo-002.png’, ‘./src/img/kaimo-003.png’ ]; // Generate sprite sheet Spritesmith.run({<!– –> src: sprites }, function handleResult(err, result) {<!– –> // if there is an error, throw it if (err) {<!– […]