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个标签选择器也不会比一个伪类选 ...
随机推荐
- Mybatis中使用集合、数组
一.简述 本文讲Mybatis中如何将传入参数为数组或者集合对象,进行遍历,组合Where条件中如in条件等内容. 有3种情况: 如果传入的是单参数且参数类型是一个List的时候,collection ...
- protobuf 动态创建
https://www.ibm.com/developerworks/cn/linux/l-cn-gpb/index.html https://originlee.com/2015/03/14/ana ...
- OpenWrt 对外网开放vsftp服务和samba服务
对WAN开放vsFTP OpenWrt默认启动了vsftp服务, 在Luci上没找到配置界面, 但是后台是有这个服务的, 如果在Openwrt的lan下, 可以直接使用FileZilla之类的客户端连 ...
- thymeleaf th:href 多个参数传递格式
今天在使用thymeleaf的th:href传递多个参数的时候困惑了.然后百度了一下,发现没有人注释说明怎么弄,然后自己google了一下,现在就标记一下,方便记录一下. th:href=" ...
- BizTalk RosettaNet解决方案搭建
contoso为证书颁发机构 分别在两台服务器中配置hosts 192.168.199.160 fabrikam 192.168.199.225 contoso 安装CA 控制面板,添加删除程序 打开 ...
- 2D空间的OBB碰撞实现
OBB全称Oriented bounding box,方向包围盒算法.其表现效果和Unity的BoxCollider并无二致.由于3D空间的OBB需要多考虑一些情况 这里仅关注2D空间下的OBB. 实 ...
- 一分钟内搭建全web的API接口神器json-server详解
JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源. 安装json-server npm install -g json ...
- 当 return 遇到 try
. . . . . 今天有同事和我探讨在群里看到的一道有趣的题目,在探讨的过程中让我搞清楚了一些曾经模糊的概念,特此记录下来. 题目给出如下代码,问运行后打印的结果是什么. public static ...
- windows保存的文件传输到linux中格式转换
直接从window传输到linux的脚本执行时,会出现以下错误. -bash: xxx: /bin/sh^M: bad interpreter: No such file or directory 解 ...
- C++实现景区信息管理系统
景区信息管理系统 实现了: 1.1 建立主程序应用菜单选项 主程序应用菜单选项包含所实现的所有功能,并且对选项采用数字标识进行选择,对其他错误输入可以进行判别,提示输入错误. 1.2 导游线路图的创建 ...