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个标签选择器也不会比一个伪类选 ...
随机推荐
- Spring Framework 5.x 学习专栏
Spring Framework 5.0 入门篇 Spring构建REST Web Service 消费一个RESTful Web Service 事务管理 Spring使用JDBC访问关系数据 任务 ...
- Groovy 和 Gradle
0.Groovy和Gradle是什么关系? Gradle,自动化构建工具,通过简单编写Groovy脚本,便可进行依赖管理并完成项目构建: 1. Groovy有什么用? 脚本+Java代码: 2. Gr ...
- js命名空间的函数namespace
这是一个扩展函数,需要初期加载的时候加载到适当的位置. 具体函数体如下: $.namespace = function() { var a=arguments, o=null, i, j, d; fo ...
- SQLServer截取字符串常用函数
SQL Server中一共提供了三个字符串截取函数:LEFT().RIGHT().SUBSTRING(). 一.LEFT()函数 函数说明如下: 语法:LEFT(character,integer). ...
- Ubuntu命令行快捷启动Matlab
转载:https://blog.csdn.net/striker_v/article/details/52884485 Matlab R2015b默认安装目录/usr/local/MATLAB/R20 ...
- laravel5.8笔记四:路由
laravel框架,必须先设置路由,才可以访问内部的控制器部分. 路由文件:routes/web.php. 基本路由 Route::get('/user', 'UserController@index ...
- 织梦channelartlist标签当前栏目高亮
channelartlist标签完美支持currentstyle属性,实现自动加载当前栏目CSS样式,可以用来标识当前栏目位置的CSS,解决方法如下: 打开文件include\taglib\chann ...
- js复制文本内容到剪贴板
记录一下使用clipboardData复制不成功. 1.定义一个按钮执行复制 <div> <button type="button" id="copyR ...
- linux windows安装python的最佳方式,miniconda
1.在linux安装python文章很多,但是步骤很多,没搞好还会把yum命令弄坏,要修复.这件事就发生在我身上,准确说不是我造成的,是总监自己安装python造成yum损坏的,然后需要运维去百度修改 ...
- [pig] pig 基础使用
1.pig运行模式 本地模式: pig -x local 直接访问本地磁盘 集群模式: pig 或者 pig -x mapreduce 2.pig latin 交互 帮助信息 help 上传本地文件 ...