CSS Sprite雪碧图的应用
2017-02-04 10:32
337 查看
雪碧图
1.静态图片 不随用户信息变化而变化
2.小图片,图片容量比较小
3.加载量比较大
一些大图不建议使用雪碧图 工具 CssGaga
效果图:
1.静态图片 不随用户信息变化而变化
2.小图片,图片容量比较小
3.加载量比较大
一些大图不建议使用雪碧图 工具 CssGaga
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>雪碧图导航</title> <style> h3,ul{margin: 0;padding: 0;} ul{list-style: none;} li h3{font-size: 14px;font-weight: 400;} li{ display: block; height: 31px; overflow: hidden; border-bottom: 1px solid #dedede; line-height: 31px; } li i{ background: url(img/sidebar.png); margin: 5px 8px 0 10px; display: inline; width: 30px; height: 24px; float: left; } .cat{ width: 150px; background: #f8f8f8; border: 1px solid #bbb; } .cat-1 i{background-position: 0 0;} .cat-2 i{background-position: 0 -24px;} .cat-3 i{background-position: 0 -48px;} .cat-4 i{background-position: 0 -72px;} .cat-5 i{background-position: 0 -96px;} .cat-6 i{background-position: 0 -120px;} .cat-7 i{background-position: 0 -144px;} .cat-8 i{background-position: 0 -168px;} .cat-9 i{background-position: -40px 0;} </style> </head> <body> <div class="cat"> <ul> <li class="cat-1"> <i></i> <h3>服装内衣</h3> </li> <li class="cat-2"> <i></i> <h3>鞋包配饰</h3> </li> <li class="cat-3"> <i></i> <h3>运动户外</h3> </li> <li class="cat-4"> <i></i> <h3>珠宝手表</h3> </li> <li class="cat-5"> <i></i> <h3>手机数码</h3> </li> <li class="cat-6"> <i></i> <h3>办公电脑</h3> </li> <li class="cat-7"> <i></i> <h3>护肤彩妆</h3> </li> <li class="cat-8"> <i></i> <h3>母婴用品</h3> </li> <li class="cat-9"> <i></i> <h3>其他分类</h3> </li> </ul> </div> </body> </html>
效果图:
相关文章推荐
- 20150726 CSS Sprite雪碧图应用
- 图标字体 VS 雪碧图——图标字体应用实践
- CSS Sprite的应用
- 对网站应用css sprite 技术自动化实施方式的探讨
- 雪碧图(css sprite)
- CSS Sprite、CSS雪碧图应用实例
- 图片的 css sprite的应用思考
- 【HTML+CSS】(2)CSS Sprite雪碧图
- CSS3雪碧图(sprite)应用实例
- 【web前端性能优化】css sprite(图片精灵)-雪碧图实现原理
- 图标字体 VS 雪碧图——图标字体应用实践
- HTML5第五课时,雪碧图的应用!!
- CSS Sprite的应用
- compass与css sprite(雪碧图)
- CSS Sprite的应用
- 雪碧图实现原理及应用
- CSS Sprite的应用
- 【HTML+CSS】(2)CSS Sprite雪碧图
- CSS Sprite的应用
- base64,雪碧图CSS Sprite,直接使用图片