Home > Developer > Web Develop
CSS Sprite Chart, in simple terms:
In order to improve the performance of the Web page, reduce the number of loading, some small icons that do not often change with the content of the site, concentrated on a large map, the graph should be used as background-image embedded page, when the relevant icon, according to background-position set coordinate values, Achieve the goal.
An example, you can copy and then look at the effect:
HTML code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Sprite</title> <Linkrel= "stylesheet"href= "Css-sprite.css"></Head><Body><Divclass= "Container"> <ulclass= "Menu"> <Liclass= "Cat-1"> <I></I> <H3><ahref="#">Project One</a></H3> </Li> <Liclass= "Cat-2"> <I> </I> <H3><ahref="#">Item Two</a></H3> </Li> <Liclass= "Cat-3"> <I></I> <H3><ahref="#">Item Three</a></H3> </Li> <Liclass= "Cat-4"> <I></I> <H3><ahref="#">Item Four</a></H3> </Li> <Liclass= "Cat-5"> <I></I> <H3><ahref="#">Item Five</a></H3> </Li> <Liclass= "Cat-6"> <I></I> <H3><ahref="#">Item Six</a></H3> </Li> <Liclass= "Cat-7"> <I></I> <H3><ahref="#">Item Seven</a></H3> </Li> <Liclass= "Cat-8"> <I></I> <H3><ahref="#">Item Eight</a></H3> </Li> <Liclass= "Cat-9"> <I></I> <H3><ahref="#">Item Nine</a></H3> </Li> <binclass= "Cat-10" > <I></I> <H3><ahref="#">Item 10</a></H3> </Li> </ul></Div></Body></HTML>
CSS code:
/*Common Settings*/. Container,. Menu{margin:0;padding:0;Line-height:0;}A:link, a:visited{text-decoration:None;Color:Inherit;}a:hover{Color:orangered;}/*format Settings*/. Menu{width:120px;List-style-type:None;Border:1px solid #ccc;}. Menu Li{Display:Block;Height:31px;Line-height:31px;}Li H3{font-size:14px;Font-weight: -;Border-bottom:1px solid #eee;}Li I{background:URL ("img/sprite.png");Display:Inline-block;float: Left;width:24px;Height:24px;margin:0 15px 5px;}. Cat-1 I{background-position:0 0;}. Cat-2 I{background-position:0-26px;}. cat-3 I{background-position:0-52px;}. cat-4 I{background-position:0-78px;}. cat-5 I{background-position:0-104px;}. cat-6 I{background-position:0-130px;}. cat-7 I{background-position:0-156px;}. Cat-8 I{background-position:0-182px;}. cat-9 I{background-position:0-208px;}. cat-10 I{background-position:0-236px;}
This is a diagram made using a Sprite online authoring tool, the tool link: http://lazytools.sinaapp.com/. Other tools are unclear, but the tool will eventually generate the icon corresponding to the location of CSS information, can be used directly, very convenient.
The following is the final:
Summary: For beginners, to learn a new knowledge point, should be more practice, their own code, light to listen to the light is not working, watching the video when you feel will, the actual operation will be a variety of problems, and more practice is the best way to continue to progress.
I do not know whether you know how to make and use Sprite chart, anyway, now I will, hehe.
CSS Sprite Chart making
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
