Home > Article > Web Front-end > CSS_Spirte implementation principle_html/css_WEB-ITnose
CSS_Spirte implementation principle_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:171094browse
CSS Spirte is what is called merging many small icons into one large picture, and then using the background-position property of CSS to dynamically position the icon where you need it. The purpose of this is mainly to reduce HTTP requests and speed up the loading speed of web pages.
Pictures
Required The result:
I won’t say much more. The specific implementation has been written in the code. , and the key points are annotated. If you have any questions, please leave a message!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>css_spirte</title> <style type="text/css"> div ul{ margin:0;padding:0;} #body_father ul { list-style:none; } #body_father{ width:150px; background-color:#f8f8f8; border: 1px solid #bbb; } #body_father li{ /*display:block;li本身就为块级元素*/ height:31px; line-height:31px; overflow:hidden; border-bottom:1px solid #dedede; } li i { background:url(img/css_spirte.png); width:30px; height:24px; /*display:inline;i标签自身就为行内元素*/ float:left; /*因为h4是块级元素默认会换行，i标签浮动脱离文档流，h4标签占用i标签位置*/ margin:3px 10px 0 0; } li h4 { font-size:14px; font-weight: 400px; } /*h4为块级元素默认的重置margin,padding*/ h4{ margin:0;padding:0; } /*为每一个i标签设置图片位置的偏移量*/ .item_li1 i{background-position:0 0;} .item_li2 i{background-position:0 -24px;} .item_li3 i{background-position:0 -48px;} .item_li4 i{background-position:0 -72px;} .item_li5 i{background-position:0 -96px;} .item_li6 i{background-position:0 -120px;} .item_li7 i{background-position:0 -144px;} .item_li8 i{background-position:0 -168px;}.test{ background-color:#CEE506;} </style></head><body> <div id='body_father'> <ul> <li class="item_li1"><i>ceshi</i> <h4>你是好的1</h4></li> <li class="item_li2"><i></i> <h4>你是好的2</h4></li> <li class="item_li3"><i></i> <h4>你是好的3</h4></li> <li class="item_li4"><i></i> <h4>你是好的4</h4></li> <li class="item_li5"><i></i> <h4>你是好的5</h4></li> <li class="item_li6"><i></i> <h4>你是好的6</h4></li> <li class="item_li7"><i></i> <h4>你是好的7</h4></li> <li class="item_li8"><i></i> <h4>你是好的8</h4></li> </ul> </div> <div> <i class="test">测试</i><h4>测试h4git</h4> </div></body></html> 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：2. Html basic syntax_html/css_WEB-ITnoseNext article：2. Html basic syntax_html/css_WEB-ITnose