文档章节

CSS 多个图标的优化

年少爱追梦
 年少爱追梦
发布于 2016/06/20 16:00
字数 175
阅读 33
收藏 0

                                                          CSS   多个图标的优化

今天去查看了一下WEBQQ音乐的前台源码,发现它对播放器的图标只是用了一张图片,发现这是一个很好的一个CSS优化的切入点,于是,就实现了一下,整个代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/backgroud-color.css" />
	</head>
	<body>
	    <div id ="test">nihao</div>
	</body>
</html>

css页面:

#test{
	width: 22px;
    height: 115px;
	background: url(../img/player_bg.png) no-repeat -46px 0px;
}

对于整个页面所用的图标很多时候可以使用一张图片,这个简单的CSS优化就可以做到了。

实验效果自己实现一下就可以看到了。

© 著作权归作者所有

共有 人打赏支持
年少爱追梦
粉丝 31
博文 184
码字总数 117969
作品 0
杭州
程序员
CSS超级压缩工具-命令行版v1.0

功能简述: 纯命令行,无界面! 删除CSS注释。对url(..)及src='..'的路径进行URL编码。删除多余的空白字符。颜色中使用英文单词自动转换为十六进制的颜色值,并且进行简化处理,十六进制颜色...

edielei
2012/12/29
674
13
CSS 写作建议和性能优化小结

作者:守候 文章转载自:https://segmentfault.com/a/1190000011390896 1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过 JS 的写作建议和技巧,那么今天就来聊聊 CS...

IT程序狮
2017/09/30
0
0
jQuery 轻量级画廊插件--jQuery lightGallery

jQuery lightGallery 是个轻量级的 jQuery 画廊,用来展示图像和视频 gallery。 主要特性: 响应式布局 支持触摸屏移动设备 可以转换 CSS 支持 Youtube Vimeo 视频 支持滑块和渐变效果 支持 ...

叶秀兰
2014/03/03
1K
0
Font Awesome 使用指南

Font Awesome (简称FA)是一套图标库,有这些优良的特性: 除了让用户可以在1000多个高质量图标内选择图标之外 无极缩放。 如何字体一样使用图标,指定大小即可,不必担心变大后图标变形的问...

刘传君
07/04
0
0
一步步打造自己的纯CSS单标签图标库

图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互、引导以及网页装饰等充当的角色作用举足轻重。由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素...

深海鱼在掘金
2017/11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
今天
0
0
HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
今天
3
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
今天
2
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
今天
3
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部