Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to introduce small icons into the html page. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

How to achieve (the most basic way)?

The implementation of the corner mark can directly use positioning to locate the corner mark to the upper right corner, but this way is not good-looking (and the font in the corner mark may be specially customized art characters).

The other two icons are essentially a picture, which can also be achieved by absolutely positioning the picture in the appropriate place (or using the background attribute, which is better (because the html tag is reduced).

The most basic implementation can be operated as long as you learn HTML and CSS, so the editor will put the source code (if you don't even know the most basic way, it is recommended to go to W3Cschool to learn the relevant front-end knowledge)

Advanced version (using sprite)

In the basic way, you will find that there are too many images to be used on a page, and loading these images requires a lot of requests with the browser. At this time, a new technology appeared (in fact, it was just a better use of the old technology). It is Sprite. The essence of Sprite is to combine these small icons into one picture to avoid multiple requests when requesting data. This helps reduce bandwidth and server pressure in the early days, as well as rendering (get all small icons at once for rendering) (all three small icons can be implemented with sprite).

This is a sprite image, which essentially uses the background attribute to cut and locate the image when calling the image. The source code is as follows (the relevant css uninstalls the style tag for demonstration):

Document. Bg-icon_diamond {width: 34px; height: 32px background: url ('css_sprites.png')-10px-10px;}. Bg-icon_fire {width: 30px; height: 36px background: url (' css_sprites.png')-118px-10px;} .bg-icon_bag {width: 28px; height: 34px background: url ('css_sprites.png')-168px-10px;} .bg-icon_game {width: 34px Height: 32pxX background: url ('css_sprites.png')-64px-10px;} .bg-icon_person {width: 32px; height: 34px10px background: url (' css_sprites.png')-10px-62px;} .bg-icon_time {width: 32px; height: 32pxX background: url ('css_sprites.png')-62px-62px } these are all the contents of the article "how to introduce small icons into html pages". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.