文档章节

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优化就可以做到了。

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

© 著作权归作者所有

共有 人打赏支持
年少爱追梦
粉丝 33
博文 185
码字总数 118529
作品 0
杭州
程序员
私信 提问
web项目中图标的前端处理方案

工程中用到图标是常事,那这些图标我们前端一般是怎么解决的呢?这几种方案有什么优缺点呢? 第一种: SVG Sprite SVG sprite其实就是svg的集合。SVG即可缩放矢量图形 (Scalable Vector Gra...

邹R-ainna
2018/11/22
0
0
CSS超级压缩工具-命令行版v1.0

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

edielei
2012/12/29
727
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
一步步打造自己的纯CSS单标签图标库

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

深海鱼在掘金
2018/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

发布xxl-job executor dotnet core 执行器的实现

DotXxlJob [github][https://github.com/xuanye/DotXxlJob] xxl-job的dotnet core 执行器实现,支持XXL-JOB 2.0+ 1 XXL-JOB概述 [XXL-JOB][1]是一个轻量级分布式任务调度平台,其核心设计目标...

假正经哥哥
今天
2
0
mysql 查询当天、本周,本月,上一个月的数据

今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ) - TO_DAYS( 时间字段名) <= 1 近7天 SELECT * FROM 表名 wher......

BraveLN
今天
3
0
Spring 事务初始化源码分析

相关文章 Spring 事务使用详解 Spring AOP 创建代理的源码解析 Spring AOP 注解方式源码解析 Spring AOP 功能使用详解 Spring 的 getBean 方法源码解析 Spring bean 创建过程源码解析 Spring...

TSMYK
今天
1
0
Android Multimedia框架总结(六)C++中MediaPlayer的C/S架构

前面几节中,都是通过java层调用到jni中,jni向下到c++层并未介绍 看下Java层一个方法在c++层 MediaPlayer后续过程 frameworks/av/media/libmedia/MediaPlayer.cpp 找一个我们之前熟悉的setDa...

天王盖地虎626
今天
3
0
【Linux】【MySQL】CentOS7安装最新版MySQL8.0.13(最新版MySQL从安装到运行)

1、前言   框框博客在线报时:2018-11-07 19:31:06   当前MySQL最新版本:8.0.13 (听说比5.7快2倍)   官方之前表示:MySQL 8.0 正式版 8.0.11 已发布,MySQL 8 要比 MySQL 5.7 快 2 ...

Code辉
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部