文档章节

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
博文 185
码字总数 118529
作品 0
杭州
程序员
私信 提问
一步步打造自己的纯CSS单标签图标库

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

深海鱼在掘金
10/30
0
0
Font Awesome 使用指南

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

刘传君
07/04
0
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
CSS 写作建议和性能优化小结

1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是...

守候i
2017/09/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
今天
1
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
6
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部