css学习_css精灵技术、字体图标
1、精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力)

2、精灵技术的本质(小的背景图集中在一张大图上)

3、精灵技术的使用
案例1:

案例2:

注意:产品类的图片一般不是用背景,而是用img标签
案例3:

4、字体图标---比精灵图标更占优势


字体图标使用流程(如果前2步不需要,可以直接从第3步开始)

推荐转换网站

如何下载字体图标(压缩包一定不要丢。把压缩包里的fonts文件放在自己的项目中)



使用步骤

注意fonts路径问题,别放错了。

如何追加新图标到原来的库里面?

css学习_css精灵技术、字体图标的更多相关文章
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- css精灵图&字体图标
精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...
- css学习_css写的位置
!!!拿到一个页面后应该先写结构再写样式 结构由大到小,由外到里 样式最好按顺序加 position .float . 颜色 背景 字体 等... 1.行内(内联)样式 2.内部样式表(按道理可 ...
- CSS学习笔记1:字体样式属性
CSS初识 成叠样式表,主要用于设置html页面的外观 产生原因:为了解决混乱的结构和样式,使结构和样式相分离. CSS注释 /*这是CSS注释*/ CSS样式规则 1.选择器用于指定css样式作用的 ...
- css学习_css补充知识
1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变 4.css 验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩 ----(节约空间,节省带宽) 6.旋转轮播图 案例: ...
- css学习_css用户界面样式
1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...
- css学习_css常见属性用法
1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block / in ...
- css学习_css浮动
1.文档流介绍 网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2 ...
- css学习_css三大特性
css三大特性 1.层叠性(就近原则) 2.继承性(和文字有关的会继承) 3.优先级 (权重问题) 权重:0,0,0,0 0001 ---标签选择器(注意:即使有20个标签选择器也不会比一个伪类选 ...
随机推荐
- 每天一个linux命令(13):less命令
1.命令简介 less(less) 命令可以对文件或其它输出进行分页显示,与moe命令相似,但是比more命令要强大许多.应该说是linux正统查看文件内容的工具. 2.用法 less [选项].. ...
- from __future__ import unicode_literals
为了适应Python 3.x的新的字符串的表示方法,在2.7版本的代码中,可以通过unicode_literals来使用Python 3.x的新的语法
- 转:基于Jmeter的MQTT测试插件
基于Jmeter的MQTT测试插件-上 1. Jmeter插件简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.下载 用于对软件做压力测试,它最初被设计用于Web应用 ...
- window下zookeeper的下载启动和报错等问题
在使用dubbo等需要用到zookeeper,之前window下本地部署,启动一直有问题,后面折腾了下才部署成功,此次记录下来. 将zookeeper下载之后,解压到指定目录即可,无需安装.例如:解压 ...
- Python之数学题目练习
首先,下面的题目来自我的大学同学的分享,他用数学证明,我用编程计算机发现了答案. 他的数学推理: 然后下面是我的Python代码: #coding=utf-8 # 井的高度 well_hegith = ...
- Java之Builder模式(并用OC实现了这种模式)
本人在学习Java,直接先学习Netty框架,因为Netty框架是业界最流行的NIO框架之一,在学习的过程中,了解到Netty服务端启动需要先创建服务器启动辅助类ServerBootstrap,它提供 ...
- slackware在vagrant中使用
slackware以简洁干净的系统闻名于世,如果你想学习了解linux,那么slackware是一个很好的选择,其他linux不是不好,他们都太复杂了,复杂的你不知道从哪里开始. 所以,还是slack ...
- 安全工具-Arachni
Arachni是一个多功能.模块化.高性能的Ruby框架,旨在帮助渗透测试人员和管理员评估web应用程序的安全性.同时Arachni开源免费,可安装在windows.linux以及mac系统上,并且可 ...
- 谈一谈iOS事件的产生和传递
谈一谈iOS事件的产生和传递 1.事件的产生 发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中. UIApplication会从事件队列中取出最前面的事件,并将事件 ...
- WPF Button 样式
WPF CheckBox 自定义样式 给Button设置ToolTip <Style TargetType="{x:Type Button}" x:Key="Def ...