文档章节

CSS 多个图标的优化

年少爱追梦
 年少爱追梦
发布于 2016/06/20 16:00
字数 175
阅读 33
收藏 0
点赞 0
评论 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优化就可以做到了。

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

© 著作权归作者所有

共有 人打赏支持
年少爱追梦
粉丝 30
博文 184
码字总数 117928
作品 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
jQuery 轻量级画廊插件--jQuery lightGallery

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

叶秀兰
2014/03/03
1K
0
CSS 超级压缩工具(预览版)

功能简要: ① 压缩文件以UTF-8(不带BOM)保存! ② 移除CSS注释 ③ 支持多文件 ④ 删除多余空格以及换行符 ⑤ CSS属性全部转换成小写字母 ⑥ 颜色如果使用英文单词的将转换成十六进制 ⑦ ...

edielei
2012/12/16
391
5
Font Awesome 使用指南

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

刘传君
07/04
0
0
小图标大国庆,开源图标库lyicon正式版0.0.1发布

经过数次的修复和优化,很高兴的向大家宣布lyicon v0.0.1正式版发布了!欢迎大家去github给我们一个star并且留下 宝贵的建议,我们会认真考虑您的建议。 lyicon是一套图标众多、风格清新、更...

lyunweb
2016/10/01
1K
5
基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理

在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可...

walb呀
2017/12/04
0
0
一步步打造自己的纯CSS单标签图标库

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

深海鱼在掘金
2017/11/28
0
0
ZUI 1.3 发布,性感无比的 HTML5 前端 UI 框架

ZUI v 1.3 一个开源前端实践方案,帮助你快速构现代跨屏应用。 在Github上项目:https://github.com/easysoft/zui 特色 简单易用,快速构建美观的现代web应用; 轻量级高性能,让你的应用更快...

开源中国总统
2015/12/12
15.3K
24

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Win10专业版安装GIT后使用Git Bash闪退解决办法

百度后把过程和最终解决办法记录下来: 百度首先出来的解决办法如下: 来自:https://segmentfault.com/q/1010000012722511?sort=created 重启电脑 重新安装 安装到C盘 尝试网上的教程 \Git...

特拉仔
14分钟前
0
0
设计模式

1.装饰器模式 概念 允许向一个现有的对象添加新的功能,同时又不改变其结构。装饰者可以在所委托被装饰者的行为之前或之后加上自己的行为,以达到特定的目的。 实现 增加一个修饰类包裹原来的...

EasyProgramming
29分钟前
1
0
用python2和opencv进行人脸识别

一、安装cv2 sudo apt-get install python-opencv opencv-data 二、 Haar特征分类器 Haar特征分类器就是一个XML文件,该文件中会描述人体各个部位的Haar特征值。包括人脸、眼睛、嘴唇等等。 ...

wangxuwei
29分钟前
0
0
python模板中循环字典

{% for k,v in user.items %} {{ k}} {{ v}} {% endfor %}

南桥北木
57分钟前
0
0
Java8系列之重新认识HashMap

简介 Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap、Hashtable、LinkedHashMap和TreeMap,类继承关系如下图所示: 下面针对各个实现类...

HOT_POT
今天
0
0
获取调用方的className

/** * 获取调用方的class * @return */private static String getInvoke() { StackTraceElement[] stackTrace = Thread.currentThread().getStackTrace(); S......

iborder
今天
0
0
深入了解一下Redis的内存模型!

一前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Redis是实现网站高并发不可或缺的一部分。 我们使用Redis时,会接触Redis的5种对象类型(字符...

Java填坑之路
今天
1
0
从实践出发:微服务布道师告诉你Spring Cloud与Spring Boot他如何选择

背景 随着公司业务量的飞速发展,平台面临的挑战已经远远大于业务,需求量不断增加,技术人员数量增加,面临的复杂度也大大增加。在这个背景下,平台的技术架构也完成了从传统的单体应用到微...

老道士
今天
1
0
大数据学习的各个阶段

第一阶段:Linux课程讲解Linux基础操作,讲的是在命令行下进行文件系统的操作,这是Hadoop学习的基础,后面的所有视频都是基于linux操作的。鉴于很多学员没有linux基础,特增加该内容,保证零linux...

董黎明
今天
0
0
CVE-2013-0077 堆溢出分析

找了很久才发现这个环境比较容易搭建分析... 环境: 系统---Win XP SP3 漏洞程序:QQPlayer 3.7.892.400 出错DLL:quartz.dll 6.5.2600.5512 调试工具:x32db+gflag.exe 过程: 首先gflag设置...

Explorer0
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部